在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;
} 試一試»