CSS 布局 - 水平和垂直居中
居中元素
水平和垂直
居中对齐元素
要水平居中块级元素（如 `<div>`），请使用 margin: auto;
设置元素的宽度将防止其拉伸到容器边缘。
然后，元素将占据指定的宽度，剩余的空间将在两个边距之间平均分配。
此 div 元素已居中。
注意： 如果未设置 width 属性（或设置为 100%），则居中对齐无效。
居中文本
要仅居中文本，请使用 text-align: center;
此文本已居中。
提示：有关对齐文本的更多示例，请参阅 CSS 文本章节。
居中图片
要居中图片，请将左右外边距设置为 auto 并将其设为 块级 元素
左右对齐 - 使用定位
对齐元素的其中一种方法是使用 position: absolute;
在我年轻而脆弱的岁月里，我父亲给了我一些建议，我一直铭记在心。
示例
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
自己动手试一试 »
注意：绝对定位的元素会从正常文档流中移除，并且可能与其他元素重叠。
左右对齐 - 使用 float
对齐元素的另一种方法是使用 float 属性。
清除浮动技巧
注意：如果一个元素比包含它的元素高，并且它被浮动，它将溢出其容器。您可以使用“clearfix hack”来解决此问题（请参阅下面的示例）。
没有清除浮动
有清除浮动
然后，我们可以将 clearfix hack 添加到包含元素中以解决此问题。
垂直居中 - 使用 padding
CSS 中有多种方法可以实现元素垂直居中。一个简单的解决方案是使用上下 padding。
我已垂直居中。
要同时实现垂直和水平居中，请使用 padding 和 text-align: center。
我已垂直和水平居中。
垂直居中 - 使用 line-height
另一个技巧是将 line-height 属性的值设置为等于 height 属性的值。
我已垂直和水平居中。
示例
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* 如果文本有多行，请添加以下内容： */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
自己动手试一试 »
垂直居中 - 使用 position 和 transform
如果 padding 和 line-height 不是选项，另一个解决方案是使用定位和 transform 属性。
我已垂直和水平居中。
示例
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
自己动手试一试 »
提示：您将在我们的 2D 变换章节中了解有关 transform 属性的更多信息。
垂直居中 - 使用 Flexbox
您也可以使用 flexbox 来居中元素。请注意，IE10 及更早版本不支持 flexbox。
示例
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid green;
}
自己动手试一试 »
提示：您将在我们的 CSS Flexbox 章节中了解有关 Flexbox 的更多信息。
