在 CSS 中，可使用多种多样特性来水平对齐元素。
对齐块元素 块元素指的是占有所有能用宽度的元素，而且在其前后左右都会换行。
块元素的事例：
应用 margin 特性来水平对齐
可根据将左和右外边距设定为 "auto"，来对齐块元素。
把左和右外边距设定为 auto，要求的是均等地分派能用的外边距。結果便是垂直居中的元素：
案例
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}
应用 position 特性开展左和右对齐
对齐元素的方式之1是应用肯定精准定位：
案例
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
注解：肯定精准定位元素会被从一切正常流中删掉，而且可以相叠元素。
跨访问器适配性难题 当像这样对齐元素时，对 <body> 元素的外边距和内边距开展预订义是1个好主张。这样能够防止在不一样的访问器中出現可见的差别。
当应用 position 特性时，IE8 和更早的版本号存在1个难题。假如器皿元素（在大家的实例中是 <div class="container">）设定了特定的宽度，而且省略了 !DOCTYPE 申明，那末 IE8 和更早的版本号会在右边提升 17px 的外边距。这好像是为翻转条预留的室内空间。当应用 position 特性时，请自始至终设定 !DOCTYPE 申明：
案例
body
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
应用 float 特性来开展左和右对齐 对齐元素的另外一种方式是应用 float 特性：
案例
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
跨访问器适配性难题 当像这样对齐元素时，对 <body> 元素的外边距和内边距开展预订义是1个好主张。这样能够防止在不一样的访问器中出現可见的差别。
当应用 float 特性时，IE8 和更早的版本号存在1个难题。假如省略 !DOCTYPE 申明，那末 IE8 和更早的版本号会在右边提升 17px 的外边距。这好像是为翻转条预留的室内空间。当应用 float 特性时，请自始至终设定 !DOCTYPE 申明：
案例
body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}