CSS Horizontal & Vertical Align
Center elements
horizontally and vertically
CSS Centering Elements
With CSS, you can center elements (horizontally, vertically, or both) with several methods, 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;
}
Try it Yourself »
Center Align Text
To center the text inside a block-level element, use text-align: center;.
This text is centered.
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%;
}
Try it Yourself »
Center Align with Flexbox
With CSS flexbox you can center elements, both horizontally and vertically, within a flex container.
A flex container with both the justify-content and the
align-items properties set to
center will align the item(s) in the center (in both axis):
Example
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid
green;
}
Try it Yourself »
Center Align with Grid
With CSS grid you can center elements, both horizontally and vertically, within a grid container.
A grid container with the place-items property set to center, will align the item(s) in the center (in both axis).
Example
.center {
display: grid;
place-items: center;
height: 200px;
border: 3px solid
green;
}
Try it Yourself »
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;
}
Try it Yourself »
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;
}
Try it Yourself »
Center Align with position and transform
If you deal with elements of unknown or dynamic dimensions, it is a common
technique to use position:
absolute; combined with transform: translate();
to center an element:
I am vertically and horizontally centered.
Example
.container p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Try it Yourself »
Tip: You will learn more about the transform property in our 2D Transforms Chapter.
