CSS 实现水平居中与垂直居中

左手的ㄟ右手 2022-05-27 05:51 395阅读 0赞

面试时遇到这个问题，当时答得很不全面，有必要做个总结。

#### 一、水平居中的实现 ####

--------------------

##### 1. 行内元素解决方案 #####

在行内元素的父级 block 元素加上 `text-align: center;` 即可。

![这里写图片描述][70]

##### 2.块级元素解决方案 #####

在需要水平居中的块级元素设置 `margin: 0 auto;` 即可（含义为上下 margin 为 0，左右 margin 自动调整）

![Alt text][]

##### 3.多个块级元素解决方案 #####

将需要垂直的块级元素都设置 `display: inline-block`，然后在父级块级元素设置 `text-align:center;`。原理有点类似设置行内元素水平居中，需要调整父级块级元素和子块级元素的宽（不然会有右图的效果）。

![这里写图片描述][70 1] ![这里写图片描述][70 2]

##### 4.多个块级元素解决方案（flexbox 布局实现） #####

如果想要这些块级元素在一行内水平居中实现（如下图），在父级块级元素填上以下代码：

display: flex;
    justify-content: center;

![这里写图片描述][70 3]

如果期望效果呈一列垂直居中（如下图），在父级块级元素填上以下代码：

display: flex;
    flex-direction: column;
    align-items: center;

![这里写图片描述][70 4]

#### 二、垂直居中实现 ####

--------------------

##### 1.行内元素解决方案 #####

在需要设置垂直的行内元素设置 `line-height` 属性，值与父级元素的 `height` 值相同。（关于line-height的研究：可移步张鑫旭老师的 [css行高line-height的一些深入理解及应用][css_line-height]）

![这里写图片描述][70 5]

##### 2.多行的行内元素解决方案 #####

在父级块级元素设置以下代码即可。

display: table-cell; 
    vertical-align: middle;

![这里写图片描述][70 6]

##### 3.已知高度的块状元素解决方案 #####

设置父级元素 `position: relative;`，已知高度的块级元素设置下面的代码：

position: absolute;
    top: 50%;
    margin-top: -40px;  //此为该元素高度的一半

![这里写图片描述][70 7]

#### 三、水平垂直居中 ####

--------------------

##### 1.块级元素解决方案 #####

设置父级元素 `position: relative;`，已知高度和宽度的块级元素设置下面的代码：

position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;

![这里写图片描述][70 8]

优点：1. 兼容性好 Support IE8+；2. 支持百分比宽高  
缺点：1. 必须声明高度；2. 不适用Windows Phone

##### 2.已知高度宽度的块级元素解决方案 #####

设置父级元素 `position: relative;`，已知高度和宽度的块级元素设置下面的代码：

position: absolute;
    top: 50%;
    left: 50%
    margin-top: -40px; //此为该元素高度的一半
    margin-left: -40px; //此为该元素宽度的一半

（效果图同1）  
优点：兼容性好 Support All Browser  
缺点：定宽高且不支持百分比

##### 3.未知高度和宽度元素解决方案 #####

设置父级元素 `position: relative;`，已知高度和宽度的块级元素设置下面的代码：

position: absolute;
    top: 50%;
    left: 50%
    transform: translate(-50%, -50%);

> 原理：当用 `top：50％; left：50％;`是以左上角为原点，故不处于中心位置  
>   `translate（-50％, -50％）`作用是，往上（x轴），左（y轴）移动自身长宽的50％，以使其居于中心位置

（效果图同1）  
优点：1. 不用定宽高  
缺点：1. 浏览器兼容性（适合移动端）；2. 厂商前缀；3. 可能与其他transform属性冲突

##### 4.使用 flexbox 实现水平垂直居中 #####

父级元素设置以下代码即可。

display: flex;
        justify-content:center;
        align-items: center;

（效果图同1）  
优点：1. 不定宽高；2. 使用方便；3. 未来 css 发展趋势  
缺点：1. 浏览器兼容性（适合移动端）；2. 厂商前缀；

#### 总结：从上面我们可以发现在实现水平垂直方面，flex布局真的是非常好用，而且是未来css发展的趋势，每一个前端都必须掌握。 ####

> (关于flex的学习可以参照阮一峰老师的 Flex 布局教程：语法篇 以及 Flex 布局教程：实例篇)

参考文章：[https://www.cnblogs.com/notepades/p/6178510.html][https_www.cnblogs.com_notepades_p_6178510.html]  
     [https://segmentfault.com/a/1190000011056434][https_segmentfault.com_a_1190000011056434]

[70]: /images/20220527/e52603f91e4c43d9b405ca018b57d460.png
[Alt text]: /images/20220527/2f3e38845e7a4183a14b7bbeece1bce4.png
[70 1]: https://img-blog.csdn.net/2018041218053755?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3a2trazE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: /images/20220527/ed4b223ed557472aa95838444e5b0929.png
[70 3]: /images/20220527/c45ade5abf88493f8119d7e799c07a9d.png
[70 4]: /images/20220527/8c761bf8556a40a89b7759e4d5cd1111.png
[css_line-height]: http://www.zhangxinxu.com/wordpress/2009/11/css%E8%A1%8C%E9%AB%98line-height%E7%9A%84%E4%B8%80%E4%BA%9B%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E5%8F%8A%E5%BA%94%E7%94%A8/
[70 5]: /images/20220527/bcc948b7b0c243a585b68a084df0d35f.png
[70 6]: /images/20220527/c4859ecbf2b748aea7fbc0b5f5568dd0.png
[70 7]: /images/20220527/8bd6b1088b154c7a99c6c231381e68c5.png
[70 8]: /images/20220527/7d3579121686411b9058e3ea4a6c1572.png
[https_www.cnblogs.com_notepades_p_6178510.html]: https://www.cnblogs.com/notepades/p/6178510.html
[https_segmentfault.com_a_1190000011056434]: https://segmentfault.com/a/1190000011056434