【CSS】布局 - 水平 & 垂直对齐

r囧r小猫 2022-04-23 08:50 219阅读 0赞

![在这里插入图片描述][20190129183148727.png]

### 元素居中对齐 ###

要水平居中对齐一个元素(如

), 可以使用 margin: auto;。  
设置到元素的宽度将防止它溢出到容器的边缘。  
元素通过指定宽度，并将两边的空外边距平均分配：  
![在这里插入图片描述][20190129183213844.png]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70]  
注意: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。

### 文本居中对齐 ###

如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;  
![在这里插入图片描述][2019012918335489.png]

![在这里插入图片描述][20190129183429874.png]

### 图片居中对齐 ###

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70 2]  
注释：绝对定位元素会被从正常流中删除，并且能够交叠元素。  
提示: 当使用 position 来对齐元素时, 通常 元素会设置 margin 和 padding 。 这样可以避免在不同的浏览器中出现可见的差异。  
当使用 position 属性时，IE8 以及更早的版本存在一个问题。如果容器元素（在我们的案例中是

）设置了指定的宽度，并且省略了 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 position 属性时，请始终设置 !DOCTYPE 声明：

![在这里插入图片描述][20190129183940452.png]

### 左右对齐 - 使用 float 方式 ###

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70 3]  
当像这样对齐元素时，对 元素的外边距和内边距进行预定义是一个好主意。这样可以避免在不同的浏览器中出现可见的差异。  
![在这里插入图片描述][20190129184115349.png]  
我们可以在父元素上添加 overflow: auto; 来解决子元素溢出的问题:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70 4]  
当使用 float 属性时，IE8 以及更早的版本存在一个问题。如果省略 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 float 属性时，请始终设置 !DOCTYPE 声明：

![在这里插入图片描述][2019012918434794.png]

### 垂直居中对齐 - 使用 padding ###

CSS 中有很多方式可以实现垂直居中对齐。 一个简单的方式就是头部顶部使用 padding:  
![在这里插入图片描述][20190129184428606.png]

如果要水平和垂直都居中，可以使用 padding 和 text-align: center:  
![在这里插入图片描述][20190129185526810.png]

### 垂直居中 - 使用 line-height ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70 5]

### 垂直居中 - 使用 position 和 transform ###

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70 6]

[20190129183148727.png]: /images/20220322/f2cce9152a1f41f0acc181fb4169cab9.png
[20190129183213844.png]: /images/20220322/29e363484ea643ab8a310923930719a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70]: /images/20220322/54c808fcbac1467db7c3e6b3b159d1e7.png
[2019012918335489.png]: /images/20220322/6c189eca51444025be207c7f1660bdac.png
[20190129183429874.png]: /images/20220322/e461d01eeea24ed8a9a9388871fed8ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70 1]: /images/20220322/899491a0eae3441b92228a55f7441818.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70 2]: /images/20220322/e7c337f61ca541f097e8a398c2e7aa1f.png
[20190129183940452.png]: /images/20220322/a35a5cfe9fb24e058465ae653af47d9b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70 3]: /images/20220322/600484134602430ab58ff343e3aa4102.png
[20190129184115349.png]: /images/20220322/2e442ba1b916415ba7f2d12200367ad5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70 4]: /images/20220322/73a2940c5e2643d9805347bbfa8bed95.png
[2019012918434794.png]: /images/20220322/c502ad5c845045148a6ea4945b8bb7b0.png
[20190129184428606.png]: /images/20220322/cb14af7f55824044924a63995438cd97.png
[20190129185526810.png]: /images/20220322/4e8a093477aa4fd0a0caf22781c32b6d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70 5]: /images/20220322/28bc5760d6b64f5aa12d768812dccf84.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70 6]: /images/20220322/9682c114d4a94b8ba54606af5e4f5c04.png