CSS 布局 - 水平 & 垂直对齐

元素居中对齐

要水平居中对齐一个元素(div)可以使用 margin: auto

如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。

文本居中对齐

如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;

图片居中对齐

要让图片居中对齐, 可以使用 margin: auto; 并将它放到 块 元素中:

左右对齐 - 使用定位方式

我们可以使用 position: absolute; 属性来对齐元素:

右对齐 position: absolute; right: 0px;

左对齐 position: absolute; left: 0px;

注释：绝对定位元素会被从正常流中删除，并且能够交叠元素。

左右对齐 - 使用 float 方式

我们也可以使用 float 属性来对齐元素:

float: right;

垂直居中对齐 - 使用 padding

CSS 中有很多方式可以实现垂直居中对齐。 一个简单的方式就是头部顶部使用 padding:

如果要水平和垂直都居中，可以使用 padding 和 text-align: center:

垂直居中 - 使用 line-height

垂直居中 - 使用 position 和 transform

除了使用 padding 和 line-height 属性外,我们还可以使用 transform 属性来设置垂直居中: