CSS 布局 - 水平 & 垂直对齐
水平 & 垂直居中对齐大理石平台检验标准
元素居中对齐
要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。
设置到元素的宽度将防止它溢出到容器的边缘。
元素通过指定宽度，并将两边的空外边距平均分配：
div 元素是居中的
实例
.center {
margin: auto;
50%;
border: 3px solid green;
padding: 10px;
}
尝试一下 »
注意: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。
文本居中对齐
如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;
文本居中对齐
实例
.center {
text-align: center;
border: 3px solid green;
}
尝试一下 »
提示: 更多文本对齐实例，请参阅 CSS 文本 章节。
图片居中对齐
要让图片居中对齐, 可以使用 margin: auto; 并将它放到 块 元素中:
实例
img {
display: block;
margin: auto;
40%;
}