CSS Align(对齐)
CSS水平对齐(Horizontal Align)
在CSS中，有几个属性用于元素水平对齐。
块元素对齐
块元素是一个元素，占用了全宽，前后都是换行符。
块元素的例子：
文本对齐，请参阅CSS文本章节。.
在这一章中，我们会告诉你块元素如何水平对齐布局。
中心对齐,使用margin属性
块元素可以把左，右页边距设置为"自动"对齐。
Note:在IE8中使用margin:auto属性无法正常工作，除非声明!DOCTYPE
margin属性可任意拆分为左，右页边距设置自动指定，结果都是出现居中元素：
实例
php中文网(php.cn) 
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
注意: 使用 margin:auto无法兼容 IE8, 除非!DOCTYPE已经声明.
运行实例 »点击 "运行实例" 按钮查看在线实例
提示:如果宽度是100％，对齐是没有效果的。
注意：IE5中块元素有一个margin处理BUG。为了使上述例子能工作，在IE5中，需要添加一些额外的代码。 实例
使用position属性设置左，右对齐
元素对齐的方法之一是使用绝对定位：
实例
php中文网(php.cn) In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
运行实例 »点击 "运行实例" 按钮查看在线实例
注意：绝对定位与文档流无关，所以它们可以覆盖页面上的其它元素。
使用float属性设置左，右对齐
使用float属性是对齐元素的方法之一：
实例
php中文网(php.cn) In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
运行实例 »点击 "运行实例" 按钮查看在线实例
使用Padding设置垂直居中对齐
CSS 中一个简单的设置垂直居中对齐的方式就是头部顶部使用 padding:
我是垂直居中。
如果要水平和垂直都居中，可以使用 padding 和 text-align: center:
我是水平和垂直都居中的。
实例
php中文网(php.cn) Centering
以下实例，我们使用 padding 和 text-align 让 div 元素的水平和垂直方向都居中:
我是水平和垂直都居中的。
运行实例 ?点击 "运行实例" 按钮查看在线实例
使用 line-height设置垂直居中
我是垂直居中的。
实例
php中文网(php.cn) 居中
以下实例中，我们让 line-height 属性值和 height 属性值相等来设置 div 元素居中：
我是垂直居中的。
运行实例 ?点击 "运行实例" 按钮查看在线实例
使用 position 和 transform设置垂直居中
除了使用 padding 和 line-height 属性外,我们还可以使用 transform 属性来设置垂直居中:
实例
php中文网(php.cn) 居中
以下实例中，我们使用了 positioning 和 transform 属性来设置水平和垂直居中：
我是水平和垂直居中的。
注意: IE8 及更早版本不支持 transform 属性。
运行实例 ?点击 "运行实例" 按钮查看在线实例
提示: 更多 transform 属性内容可以参阅2D 翻转章节。
Crossbrowser兼容性问题
类似这样的元素对齐时，预先确定margin和元素的填充，始终是一个好主意。这是为了避免在不同的浏览器中的可视化差异。
IE8和早期有一个问题，当使用float属性时。如果一个容器元素（在本例中
）指定的宽度，!DOCTYPE声明是缺失，IE8和早期版本会在右边增添17px的margin。这似乎是一个滚动的预留空间。使用float属性时始终设置在DOCTYPE声明中！Navigasi Tutorial