实现垂直水平居中的方法

女爷i 2022-06-06 08:40 402阅读 0赞

因为这一类型题目我面试的时候被问了很多遍，然后就想总结一下吧。大概分了几类。  
html代码如下：

其样式\#container \{  
width: 300px;  
height: 300px;  
background-color: \#000;  
\}

#child {
        width: 100px;
        height: 100px;
        background-color: yellow;
    }

**第一类**<不知道父元素的宽高和子元素的宽高>

1.  利用绝对定位（其百分比是相对于父元素而言）和transform的translate属性（其百分比是相对于其自身而言）

#container { position: relative; }
    
    #child { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }

（2） 利用父元素中设置display:table-cell；来把子元素模拟成一个表格单元格，再设置text-align=center；vertical-align：middle，还要将子元素设置为inline-block，*（只是用于ie8+，ff,opear,chrome等现代浏览器）*

#container { display: table-cell; vertical-align: middle; text-align: center; }
        #child { display: inline-block; }

（3）直接使用弹性布局flex  
这里就不贴代码了，毕竟这么简单快捷的办法，不会还好意思说做前端的？哈哈哈哈

**第二类**<适合只知道子元素的宽（实现水平居中）或者高（实现垂直居中）或者两者都知道（水平垂直居中>

（1）使用绝对定位和margin（最简单通用的办法）

#container { position: relative; }
    #child { position: absolute; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; }

（2）还是使用绝对定位，这个方法也没有用到子元素的宽高，但是就是要定义其宽高，不然left和right会决定他的宽，top和bottom决定他的高。  
原理：通过配对设置top/bottom、left/right为0，再设置margin：auto即可

#container {
        position: relative;
    }
    
    #child {
        position: absolute;
        left: 0;  left和right配对出现控制水平方向
        right: 0;
        top: 0;   top和bottom配对出现控制垂直方向
        bottom: 0;
        margin: auto;
    }

***这种方法只支持ie9+、ff、chrome等现代浏览器***

**第三类**<这种方法只需要知道父元素的高即可，而且这对ie6、ie7有效>

原理：为父元素设置一个font-size值，其值为其高度除以1.14；再加上text-align：center。  
为子元素设置inline/inline-block和vertical-align：middle即可

***《这一类与设置display：table-cell这一种方法加起来就可以解决兼容性问题的垂直居中了》***

**第四类**<只是实现一边居中的一些属性>  
（1）/\* 不用知道子元素父元素元素的宽高，不过只能水平居中 ***\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\****/

#child { margin: 0 auto;}

（2）/\* text-align:center;这个只能对图片文字按钮进行水平居中 ***\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\****/

（3）/\* 将文字的line-height设置为父元素的高，可以实现垂直居中，不过只适合一行文字***\*\*\*\*\*\*\*\*\*\****/