CSS 布局 - 水平与垂直对齐
居中元素
水平和垂直
居中对齐元素
要水平居中块级元素（如 <div>），请使用 margin: auto;
设置元素的宽度将防止它扩展到其容器的边缘。
然后元素将占据指定的宽度，剩余空间将平均分配到两个边距之间。
此 div 元素居中。
注意： 如果 width 属性未设置（或设置为 100%），则居中对齐无效。
居中对齐文本
要仅居中元素内的文本，请使用 text-align: center;
此文本居中。
提示： 有关如何对齐文本的更多示例，请参阅 CSS 文本 章。
居中图像
要居中图像，请将左右边距设置为 auto 并将其设为 block 元素。
左右对齐 - 使用位置
对齐元素的一种方法是使用 position: absolute;
在我年轻且更脆弱的岁月里，我的父亲给了我一些建议，我一直铭记在心。
示例
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
自己尝试 »
注意： 绝对定位的元素将从正常流中移除，并且可以与其他元素重叠。
左右对齐 - 使用浮动
对齐元素的另一种方法是使用 float 属性。
clearfix 技巧
注意： 如果元素比包含它的元素更高，并且它被浮动，它将溢出到其容器之外。您可以使用“clearfix 技巧”来解决此问题（请参阅下面的示例）。
没有 Clearfix
有 Clearfix
然后我们可以将 clearfix 技巧添加到包含元素中以解决此问题。
垂直居中 - 使用内边距
有很多方法可以垂直居中元素。一个简单的解决方案是使用顶部和底部 padding
我垂直居中。
要垂直和水平居中，请使用 padding 和 text-align: center
我垂直和水平居中。
垂直居中 - 使用行高
另一个技巧是使用 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;
}
自己尝试 »
垂直居中 - 使用定位和变换
如果 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%);
}
自己尝试 »
提示：您将在我们的 二维变换章节 中了解更多关于变换属性的信息。
垂直居中 - 使用 Flexbox
您也可以使用 flexbox 来居中元素。请注意，flexbox 在 IE10 及更早版本中不受支持。
示例
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid green;
}
自己尝试 »
提示：您将在我们的 CSS Flexbox 章节 中了解更多关于 Flexbox 的信息。
