CSS 布局 - 水平和垂直对齐
中心元素
水平和垂直
居中对齐元素
要水平居中一个块元素（如<div> ）， 使用 margin: auto;
设置元素的宽度将防止其延伸到其容器的边缘。
然后元素将占据指定的宽度，剩余空间将在两个边距之间平均分配：
此 div 元素居中。
笔记： 如果width 属性未设置（或设置为 100%）。
居中对齐文本
要将文本置于元素的中心，请使用 text-align: center;
此段文字居中。
提示： 有关如何对齐文本的更多示例，请参阅CSS 文本 章节。
将图像置于中心
要使图像居中，请将左边距和右边距设置为 auto 并把它变成block 元素：
左对齐和右对齐 - 使用位置
对齐元素的一种方法是使用 position: absolute;:
在我年轻而脆弱的岁月里，我父亲给了我一些建议，从那时起，这些建议一直在我心中回荡。
笔记： 绝对定位元素脱离了正常流，并且可以与元素重叠。
左对齐和右对齐 - 使用浮动
对齐元素的另一种方法是使用 float 财产：
clearfix 技巧
笔记： 如果某个元素比包含它的元素高，并且它是浮动的，它将溢出其容器。您可以使用“clearfix hack”来修复此问题（参见下面的示例）。
不使用Clearfix
使用 Clearfix
然后我们可以向包含元素添加 clearfix hack 来解决这个问题：
垂直居中 - 使用填充
在 CSS 中，有很多方法可以将元素垂直居中。一个简单的解决方案是使用 top 和 bottom padding:
我是垂直居中的。
要垂直和水平居中，请使用 padding 和text-align: center:
我垂直和水平都居中。
垂直居中 - 使用 line-height
另一个技巧是使用 line-height 其值等于height 财产：
我垂直和水平都居中。
例子
。中心 {
行高：200px；
高度：200px；
边框：3px 实心绿色；
文本对齐：居中；
}
/* 如果文本有多行，则添加以下内容：*/
.中心 p {
行高：1.5；
显示：内联块；
垂直对齐：中间；
}
亲自尝试 »
垂直居中 - 使用位置和变换
如果 padding 和line-height 不是选项，另一个解决方案是使用定位和transform 财产：
我垂直和水平都居中。
提示： 您将在我们的2D 变换章节.
垂直居中 - 使用 Flexbox
您还可以使用 flexbox 来居中。请注意，IE10 及更早版本不支持 flexbox：
提示： 您将在我们的CSS Flexbox 章节.
