CSS Align
CSS Layout - Horizontal & Vertical Align
Center Align Elements
To horizontally center a block element (like <div>), use margin: auto;
By adjusting the element’s width, you can stop it from extending past the boundaries of its container.
After that, the element will occupy the designated width, with the remaining space being divided equally between the two margins:
Example
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
Note: If the width property is left at 100% or is not specified at all, center alignment has no effect.
Center Align Text
To just center the text inside an element, use text-align: center;
Example
.center {
text-align: center;
border: 3px solid green;
}
Advice: Refer to the CSS Text chapter for additional examples of text alignment.
Center an Image
To center an image, make it a block element and set the left and right margins to auto:
Example
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
Advice: Refer to the CSS Text chapter for additional examples of text alignment.
Left and Right Align - Using position
One method for aligning elements is to use position: absolute;:
Example
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
Note: components that are positioned absolute are separated from the regular flow and may overlap other components.
Left and Right Align - Using float
Using the float property is another way to align elements:
Example
.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
The clearfix Hack
Note: An element will overflow outside of its container if it is taller than the element that contains it and it is floated. This can be fixed with the “clearfix hack” (see example below).
Then, to address this issue, we can append the clearfix hack to the contained element:
Example
.clearfix::after {
content: "";
clear: both;
display: table;
}
Center Vertically - Using padding
In CSS, there are numerous methods for vertical element centering. Using padding at the top and bottom is an easy fix:
Example
.center {
padding: 70px 0;
border: 3px solid green;
}
To center both vertically and horizontally, use padding and text-align: center:
Example
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
Center Vertically - Using line-height
Using the line-height property and setting its value to match the height property is another trick:
Example
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* If the text has multiple lines, add the following: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
Center Vertically - Using position & transform
Using positioning and the transform property is an additional alternative if padding and line-height aren’t available:
Example
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Advice: Our 2D Transforms Chapter contains more information about the transform property.
Center Vertically - Using Flexbox
Flexbox is another tool for centering objects. Just be aware that Internet Explorer 10 and previous versions do not support flexbox:
Example
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid green;
}
Tip: Check out our CSS Flexbox Chapter for additional information on Flexbox.
