在CSS中，几个属性可以用来水平对齐的元件。
中心对齐-使用margin
设定块级元件的宽度会阻止它伸出到其容器的边缘。 使用margin: auto; ，其容器内水平居中的元素。
然后该元件将占据指定的宽度，并且剩余的空间将同样在两个边缘之间划分：
提示：中心对准有，如果没有效果width属性未设置（或设置为100％）。
提示：对于对齐文本，请参见CSS文本章节。
左，右对齐-使用position
对齐元素的方法之一是使用position: absolute; ：
例
.right
{
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
} 试一试» 注意：绝对定位元件从正常流中除去，并能重叠的元素。
提示：当调整元素position ，始终定义margin和padding为<body>元素。 这是为了避免在不同的浏览器的视觉差别。
还有一个与IE8的问题以及更早版本，使用时position 。 如果一个容器元素（在我们的例子<div class="container"> ）有一个指定的宽度， !DOCTYPE声明缺失，IE8和早期版本将添加一个17px margin右侧。 这似乎是一个滚动条预留空间。 因此，始终将!DOCTYPE当使用声明position ：
例
body
{
margin: 0;
padding: 0;
}
.container
{
position: relative;
width: 100%;
}
.right
{
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
} 试一试» 左，右对齐-使用float
用于对准元件的另一种方法是使用float属性：
提示：当具有调心元素float ，始终定义margin和padding为<body>元素。 这是为了避免在不同的浏览器的视觉差别。
还有一个与IE8的问题以及更早版本，使用时float 。 如果!DOCTYPE声明缺失，IE8和早期版本将添加一个17px margin右侧。 这似乎是一个滚动条预留空间。 所以，总是设置!DOCTYPE使用时声明float ：
例
body
{
margin: 0;
padding: 0;
}
.right
{
float: right;
width: 300px;
background-color: #b0e0e6;
} 试一试»