TheLazy.Dev
Portfolio GitHub

Blog

css |html

Different centering methods in css

malapashish

malapashish

Posted on May 23, 2021

Different centering methods in css

The above article will cover different ways of centering things using CSS.

1.Using Flexbox

HTML 
<div class="container">
    <img src="car.jpg" />
</div>
Enter fullscreen mode Exit fullscreen mode
CSS 
html, body, .container {
 height: 100%;
}
.container {
 display: flex;
 justify-content: center; /* horizontal center */
}
img {
 align-self: center; /* vertical center */
}
Enter fullscreen mode Exit fullscreen mode

2.Using CSS transform

CSS transforms are based on the size of the elements so if you don't know how tall or wide your element is, you can position it absolutely 50% from the top and left of a relative container and translate it by 50% left and upwards to center it vertically and horizontally. Keep in mind that with this technique, the element could end being rendered at a non-integer pixel boundary, making it look blurry.

HTML 
<div class="container">
 <div class="element"></div>
</div>
Enter fullscreen mode Exit fullscreen mode
CSS 
.container {
 position: relative;
}
.element {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}
Enter fullscreen mode Exit fullscreen mode

3.Using margin: 0 auto;

Objects can be centered by using margin: 0 auto; if they are block elements and have a defined width.

HTML 
<div class="containerDiv">
 <div id="centeredDiv"></div>
</div>
<div class="containerDiv">
 <p id="centeredParagraph">This is a centered paragraph.</p>
</div>
<div class="containerDiv">
 <img id="centeredImage"
src="https://i.kinja-img.com/gawker-media/image/upload/s--c7Q9b4Eh--/c_scale,fl_progressive,q_80,w_
800/qqyvc3bkpyl3mfhr8all.jpg" />
</div>
Enter fullscreen mode Exit fullscreen mode
CSS 
.containerDiv {
 width: 100%;
 height: 100px;
 padding-bottom: 40px;
}
#centeredDiv {
 margin: 0 auto;
 width: 200px;
 height: 100px;
 border: 1px solid #000;
}
#centeredParagraph {
 width: 200px;
 margin: 0 auto;
}
#centeredImage {
 display: block;
 width: 200px;
 margin: 0 auto;
}
Enter fullscreen mode Exit fullscreen mode

4.Using text-align

The most common and easiest type of centering is that of lines of text in an element. CSS has the rule text-align:center for this purpose:

HTML 
<p>Lorem ipsum</p>
Enter fullscreen mode Exit fullscreen mode
CSS 
p {
 text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

This does not work for centering entire block elements. text-align controls only alignment of inline content like text in
its parent block element.

5.Using position: absolute

Automatic margins, paired with values of zero for the left and right or top and bottom offsets, will center an absolutely positioned elements within its parent.

HTML 
<div class="parent">
 <img class="center" src="http://lorempixel.com/400/200/" />
</div>
Enter fullscreen mode Exit fullscreen mode
CSS 
.parent {
 position: relative;
 height: 500px;
}
.center {
 position: absolute;
 margin: auto;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
}
Enter fullscreen mode Exit fullscreen mode

Elements that don't have their own implicit width and height like images do, will need those values defined.

6.Using calc()

The calc() function is the part of a new syntax in CSS3 in which you can calculate (mathematically) what size/position your element occupies by using a variety of values like pixels, percentages, etc. Note: Whenever you use this function, always take care of the space between two values calc(100% - 80px).

CSS 
.center {
 position: absolute;
 height: 50px;
 width: 50px;
 background: red;
 top: calc(50% - 50px / 2); /* height divided by 2*/
 left: calc(50% - 50px / 2); /* width divided by 2*/
}
Enter fullscreen mode Exit fullscreen mode
HTML 
<div class="center"></div>
Enter fullscreen mode Exit fullscreen mode

7.Using line-height

You can also use line-height to center vertically a single line of text inside a container :

CSS 
div {
 height: 200px;
 line-height: 200px;
}
Enter fullscreen mode Exit fullscreen mode

That's quite ugly, but can be useful inside an element. The line-height property works only when the text to be centered spans a single line. If the text wraps into multiple lines, the resulting output won't be centered.

8.Vertical align anything with 3 lines of code

Use these 3 lines to vertical align practically everything. Just make sure the div/image you apply the code to has a parent with a height.

CSS 
div.vertical {
 position: relative;
 top: 50%;
 transform: translateY(-50%);
}
Enter fullscreen mode Exit fullscreen mode
HTML 
<div class="vertical">Vertical aligned text!</div>
Enter fullscreen mode Exit fullscreen mode

9.Centering in relation to another item

We will see how to center content based on the height of a near element.

HTML 
<div class="content">
 <div class="position-container">
 <div class="thumb">
 <img src="http://lorempixel.com/400/200/">
 </div>
 <div class="details">
 <p class="banner-title">text 1</p>
 <p class="banner-text">content content content content content content content content
content content content content content content</p>
 <button class="btn">button</button>
 </div>
 </div>
</div>
Enter fullscreen mode Exit fullscreen mode
CSS 
.content * {
 box-sizing: border-box;
}
.content .position-container {
 display: table;
}
.content .details {
 display: table-cell;
 vertical-align: middle;
 width: 33.333333%;
 padding: 30px;
 font-size: 17px;
 text-align: center;
}
.content .thumb {
 width: 100%;
}
.content .thumb img {
 width: 100%;
}
Enter fullscreen mode Exit fullscreen mode

The main points are the 3 .thumb, .details and .position-container containers:

  • The .position-container must have display: table.
  • The .details must have the real width set width: .... and display: table-cell, vertical-align: middle.
  • The .thumb must have width: 100% if you want that it will take all the remaining space and it will be influenced by the .details width.
  • The image (if you have an image) inside .thumb should have width: 100%, but it is not necessary if you have correct proportions.

10.Ghost element technique (Michał Czernow's hack)

This technique works even when the container's dimensions are unknown.
Set up a "ghost" element inside the container to be centered that is 100% height, then use vertical-align: middle on both that and the element to be centered.

CSS 
/* This parent can be any width and height */
.block {
 text-align: center;
 /* May want to do this if there is risk the container may be narrower than the element inside */
 white-space: nowrap;
}
/* The ghost element */
.block:before {
 content: '';
 display: inline-block;
 height: 100%;
 vertical-align: middle;
 /* There is a gap between ghost element and .centered,
 caused by space character rendered. Could be eliminated by
 nudging .centered (nudge distance depends on font family),
 or by zeroing font-size in .parent and resetting it back
 (probably to 1rem) in .centered. */
 margin-right: -0.25em;
}
/* The element to be centered, can also be of any width and height */
.centered {
 display: inline-block;
 vertical-align: middle;
 width: 300px;
 white-space: normal; /* Resetting inherited nowrap behavior */
}
Enter fullscreen mode Exit fullscreen mode
HTML 
<div class="block">
 <div class="centered"></div>
</div>
Enter fullscreen mode Exit fullscreen mode

11.Centering vertically and horizontally without worrying about height or width

The following technique allows you to add your content to an HTML element and center it both horizontally and vertically without worrying about its height or width.

The outer container
  • should have display: table;
The inner container
  • should have display: table-cell;
  • should have vertical-align: middle;
  • should have text-align: center;
The content box
  • should have display: inline-block;
  • should re-adjust the horizontal text-alignment to eg. text-align: left; or text-align: right;, unless you want text to be centered
HTML 
<div class="outer-container">
 <div class="inner-container">
 <div class="centered-content">
 You can put anything here!
 </div>
 </div>
</div>
Enter fullscreen mode Exit fullscreen mode
CSS 
body {
 margin : 0;
}
.outer-container {
 position : absolute;
 display: table;
 width: 100%; /* This could be ANY width */
 height: 100%; /* This could be ANY height */
 background: #ccc;
}
.inner-container {
 display: table-cell;
 vertical-align: middle;
 text-align: center;
}
.centered-content {
 display: inline-block;
 text-align: left;
 background: #fff;
 padding: 20px;
 border: 1px solid #000;
}
Enter fullscreen mode Exit fullscreen mode

12.Vertically align an image inside div

HTML 
<div class="wrap">
 <img src="http://lorempixel.com/400/200/" />
</div>
Enter fullscreen mode Exit fullscreen mode
CSS 
.wrap {
 height: 50px;/* max image height */
 width: 100px;
 border: 1px solid blue;
 text-align: center;
}
.wrap:before {
 content:"";
 display: inline-block;
 height: 100%;
 vertical-align: middle;
 width: 1px;
}
img {
 vertical-align: middle;
}
Enter fullscreen mode Exit fullscreen mode

13.Centering with fixed size

If the size of your content is fixed, you can use absolute positioning to 50% with margin that reduces half of your content's width and height:

HTML 
<div class="center">
 Center vertically and horizontally
</div>
Enter fullscreen mode Exit fullscreen mode
CSS 
.center {
 position: absolute;
 background: #ccc;
 left: 50%;
 width: 150px;
 margin-left: -75px; /* width * -0.5 */
 top: 50%;
 height: 200px;
 margin-top: -100px; /* height * -0.5 */
}
Enter fullscreen mode Exit fullscreen mode

14.Vertically align dynamic height elements

HTML 
<div class="vcenter--container">
 <div class="vcenter--helper">
 <div class="vcenter--content">
 <!--stuff-->
 </div>
 </div>
</div>
Enter fullscreen mode Exit fullscreen mode
CSS 
.vcenter--container {
 display: table;
 height: 100%;
 position: absolute;
 overflow: hidden;
 width: 100%;
}
.vcenter--helper {
 display: table-cell;
 vertical-align: middle;
}
.vcenter--content {
 margin: 0 auto;
 width: 200px;
}
Enter fullscreen mode Exit fullscreen mode

15.Horizontal and Vertical centering using table layout

One could easily center a child element using table display property.

HTML 
<div class="wrapper">
 <div class="parent">
 <div class="child"></div>
 </div>
</div>
Enter fullscreen mode Exit fullscreen mode
CSS 
.wrapper {
 display: table;
 vertical-align: center;
 width: 200px;
 height: 200px;
 background-color: #9e9e9e;
}
.parent {
 display: table-cell;
 vertical-align: middle;
 text-align: center;
}
.child {
 display: inline-block;
 vertical-align: middle;
 text-align: center;
 width: 100px;
 height: 100px;
 background-color: teal;
}
Enter fullscreen mode Exit fullscreen mode
💖 💪 🙅 🚩
malapashish
malapashish

Posted on May 23, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Forsted Glass Effect using html css
html Forsted Glass Effect using html css

November 29, 2024

CSS Cleanup Tools: Top Picks for Cleaner, Faster Code
webdev CSS Cleanup Tools: Top Picks for Cleaner, Faster Code

November 29, 2024

Easy Animation with Alpine.js
javascript Easy Animation with Alpine.js

November 27, 2024

Create a Infinite Scrolling Marquee with HTML and CSS
webdev Create a Infinite Scrolling Marquee with HTML and CSS

November 26, 2024

Tailwind CSS is such a game changer!!!
webdev Tailwind CSS is such a game changer!!!

November 25, 2024