YouTip), you can use margin: auto;.
Setting a width on the element prevents it from overflowing the edges of its container.
The element is centered by specifying a width and then equally distributing the outer margins on both sides:
The div element is centered.
## Example
.center{margin:auto; width:50%; border:3 px solid green; padding:10 px; }
[Try it yourself »](
**Note:** If the width property is not set (or is set to 100%), centering will not work.
* * *
## Centering Text
If you only want to center text inside an element, you can use text-align: center;
Text is centered.
## Example
.center{text-align:center; border:3 px solid green; }
[Try it yourself »](
**Tip:** For more text alignment examples, see the ( chapter.
* * *
## Centering Images
To center an image, you can use margin: auto; and place it inside a **block** element:
## Example
img{display:block; margin:auto; width:40%; }
[Try it yourself »](
* * *
## Left & Right Alignment – Using Positioning
We can use the position: absolute; property to align elements:
— Learning is not just about technology, but also about dreams!!!
## Example
.right{position:absolute; right:0 px; width:300 px; border:3 px solid#73AD21; padding:10 px; }
[Try it yourself »](
Note: Absolutely positioned elements are removed from the normal flow and can overlap other elements.
**Tip:** When using position to align elements, it's common to set margin and padding on the element. This helps avoid visible differences across different browsers.
When using the position property, there is an issue in IE8 and earlier versions. If the container element (in our case,
) has a specified width and the !DOCTYPE declaration is omitted, IE8 and earlier versions will add an extra 17px margin to the right side. This appears to be space reserved for the scrollbar. Always include the !DOCTYPE declaration when using the position property:
## Example
body{margin:0; padding:0; }.container{position:relative; width:100%; }.right{position:absolute; right:0 px; width:300 px; background-color:#b0e0e6; }
[Try it yourself »](
* * *
## Left & Right Alignment – Using Float
We can also use the float property to align elements:
## Example
.right{float:right; width:300 px; border:3 px solid#73AD21; padding:10 px; }
[Try it yourself »](
When aligning elements this way, it's a good idea to predefine margin and padding on the element. This helps avoid visible differences across different browsers.
> Note: If a child element’s height exceeds that of its parent and the child is floated, the child will overflow. In such cases, you can use "clearfix" to resolve the issue.
You can solve the overflow problem by adding overflow: auto; to the parent element:
## Example
.clearfix{overflow:auto; }
[Try it yourself »](
When using the float property, there is an issue in IE8 and earlier versions. If the !DOCTYPE declaration is omitted, IE8 and earlier versions will add an extra 17px margin to the right side. This appears to be space reserved for the scrollbar. Always include the !DOCTYPE declaration when using the float property:
## Example
body{margin:0; padding:0; }.right{float:right; width:300 px; background-color:#b0e0e6; }
[Try it yourself »](
* * *
## Vertical Centering – Using Padding
There are many ways to achieve vertical centering in CSS. A simple approach is to use padding at the top of the header:
I am vertically centered.
## Example
.center{padding:70 px 0; border:3 px solid green; }
[Try it yourself »](
If you want both horizontal and vertical centering, you can use padding together with text-align: center:
I am centered both horizontally and vertically.
## Example
.center{padding:70 px 0; border:3 px solid green; text-align:center; }
[Try it yourself »](
* * *
## Vertical Centering – Using line-height
I am vertically centered.
## Example
.center{line-height:200 px; height:200 px; border:3 px solid green; text-align:center; }.center p{line-height:1.5; display:inline-block; vertical-align:middle; }
[Try it yourself »](
* * *
## Vertical Centering – Using position and transform
In addition to using padding and line-height properties, we can also use the transform property to achieve vertical centering:
## Example
.center{height:200 px; position:relative; border:3 px solid green; }.center p{margin:0; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }
[Try it yourself »](
**Tip:** For more information about the transform property, see the (
* * *
## More Examples
(
(