CSS : 水平 & 垂直对齐

版权声明：原创内容，欢迎转载 https://blog.csdn.net/weixin_43731793/article/details/91380737

1、元素居中对齐

要水平居中对齐一个元素，可以使用 margin: auto;
没有设置 width 属性(或者设置 100%)，居中对齐将不起作用

2、文本居中对齐

为了文本在元素内居中对齐，使用 text-align: center;

3、图片居中对齐

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

4、左右对齐 - 使用定位方式

使用 position: absolute; 属性来对齐元素:

5、左右对齐 - 使用 float 方式

使用 float 属性来对齐元素:

6、垂直居中对齐 - 使用 padding

CSS 中有很多方式可以实现垂直居中对齐。
一个简单的方式就是头部顶部使用 padding
如果要水平和垂直都居中，可以使用 padding 和 text-align: center

7、垂直居中 - 使用 line-height

8、垂直居中 - 使用 position 和 transform

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