Horizontal Centering
There are several ways to horizontally center elements in CSS, depending on the type of element.
Center Align Block Elements
Use margin: auto; , to horizontally center a block-level element (like <div>).
Also specify a width for the element, to prevent it from stretching out to the edges of its container.
Note
Center aligning has no effect on block-level elements if the width property is not set (or set to 100%).
Below, the <div> element is centered and has a width of 50% (and the remaining space will be split equally between the left and right margins):
This div element is centered.
Example
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}Live preview
Center Align Text
To center the text inside a block-level element, use text-align: center; .
This text is centered.
Example
p {
text-align: center;
}Live preview
Tip
For more examples on how to align text, see the CSS Text chapter.
Center Align an Image
To center an image, set margin-left and margin-right to auto , and also turn the image into a block element:
Example
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}Live preview
Left and Right Align - Using position
Another method for aligning elements is to use position: absolute; :
Note
Absolute positioned elements are removed from the normal flow, and can overlap other elements.
This <div> element is positioned to the right, with the position: absolute property.
Example
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid green;
padding: 10px;
}Live preview
Left and Right Align - Using float
Another method for aligning an element to the left or right, is to use the float property:
Example
.right {
float: right;
width: 300px;
border: 3px solid green;
padding: 10px;
}Live preview