CSS Layout - Horizontal & Vertical Align

Horizontal & vertical center alignment

Element center alignment

To horizontally center-align an element (such as <div>), you can usemargin: auto;。

Setting the width of the element will prevent it from overflowing to the edges of the container.

The element is centered by specifying a width and distributing the empty margins on both sides equally:

The div element is centered

Example

.center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; }

Try it Yourself »

Note:If not setwidthproperty (or setting it to 100%), the center alignment will not work.

Text center alignment

If you only want to center the text within an element, you can usetext-align: center;

Text center alignment

Example

.center { text-align: center; border: 3px solid green; }

Try it Yourself »

Tip:For more text alignment examples, please refer toCSS TextChapter.

Image center alignment

To center an image, you can usemargin: auto;And place it intoblockelement:

Example

img { display: block; margin: auto; width: 40%; }

Try it Yourself »

Left/right alignment - using positioning

We can useposition: absolute;property to align elements:

Example Tutorial -- Learning is not only technology, but also dreams!!!

Example

.right { position: absolute; right: 0px; width: 300px; border: 3px solid #2167AD; padding: 10px; }

Try it Yourself »

Note:Absolutely positioned elements are removed from the normal flow and can overlap other elements.

Tip:When usingpositionWhen aligning elements, usually<body>the element will setmarginandpadding. This can avoid visible differences in different browsers.

When using the position property, IE8 and earlier versions have a problem. If the container element (in our case <div class="container">) has a specified width and the !DOCTYPE declaration is omitted, then IE8 and earlier versions will add an extra 17px margin on the right side. This seems to be space reserved for the scrollbar. When using the position property, always set the !DOCTYPE declaration:

Example

body { margin: 0; padding: 0; } .container { position: relative; width: 100%; } .right { position: absolute; right: 0px; width: 300px; background-color: #b0e0e6; }

Try it Yourself »

Left/Right Align - Using the float Method

We can also usefloatproperty to align elements:

Example

.right { float: right; width: 300px; border: 3px solid #2167AD; padding: 10px; }

Try it Yourself »

When aligning elements like this, it is a good idea to predefine the margin and padding of the <body> element. This avoids visible differences in different browsers.

Note: If the child element's height is greater than the parent element, and the child element is set to float, then the child element will overflow. At this point, you can use "clearfix(clear float)" to solve this problem.

We can add overflow: auto; to the parent element to solve the problem of child element overflow:

Example

.clearfix { overflow: auto; }

Try it Yourself »

When using the float property, IE8 and earlier versions have a problem. If the !DOCTYPE declaration is omitted, then IE8 and earlier versions will add an extra 17px margin on the right side. This seems to be space reserved for the scrollbar. When using the float property, always set the !DOCTYPE declaration:

Example

body { margin: 0; padding: 0; } .right { float: right; width: 300px; background-color: #b0e0e6; }

Try it Yourself »

Vertical Center Alignment - Using padding

There are many ways in CSS to achieve vertical centering. A simple way is to use at the top of the headerpadding:

I am vertically centered.

Example

.center { padding: 70px 0; border: 3px solid green; }

Try it Yourself »

If you want to center both horizontally and vertically, you can usepaddingandtext-align: center:

I am centered both horizontally and vertically.

Example

.center { padding: 70px 0; border: 3px solid green; text-align: center; }

Try it Yourself »

Vertical centering - using line-height

I am vertically centered.

Example

.center { line-height: 200px; height: 200px; border: 3px solid green; text-align: center; } /*If the text has multiple lines, add the following code:*/ .center p { line-height: 1.5; display: inline-block; vertical-align: middle; }

Try it Yourself »

Vertical centering - using position and transform

In addition to usingpaddingandline-heightBesides the property, we can also usetransformproperty to set vertical centering:

Example

.center { height: 200px; position: relative; border: 3px solid green; } .center p { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

Try it Yourself »

Tip:For more content on the transform property, you can refer to2D Flip Chapter。

More Examples

CSS Use margin to center align div

CSS Use absolute positioning to right align div

other extensions