css元素水平和垂直同时居中的四种方法

心已赠人 2023-07-18 14:11 21阅读 0赞

“如何实现任何元素的水平垂直居中？”前端面试常常会被问到这个似乎挺不起眼没技术含量的问题，有的朋友也就支支吾吾模模糊糊地回答面试官。这里分享四种实现元素水平垂直居中的方法，简单明朗一学就上手。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N4aml0_size_16_color_FFFFFF_t_70]  
**1. margin或padding配合调整**  
由俭入奢，第一种方法是最基础也是比较局限的，就是用`margin`和`padding`配合调整，按已知的大小去控制间距：

.parent { 
        width: 200px;
        height: 200px;
        background-color: #ADD8E6;
        padding: 50px 0;  /* （200-100）/2 上下各50px*/
        box-sizing: border-box;
    }
    .son { 
        width: 100px;
        height: 100px;
        background-color: #DB7093;
        margin: 0 auto;  /*水平居中*/
    }

**2. 定位调整**  
升级一下，用定位解决。父元素`relative`相对定位，子元素`absolute`绝对定位，上左各50%，再用`margin-top`、`margin-left`负值调整。

.parent { 
        width: 200px;
        height: 200px;
        background-color: #ADD8E6;
        position: relative;  /*相对定位*/
    }
    .son { 
        width: 100px;
        height: 100px;
        background-color: #DB7093;
        position: absolute;  /*绝对定位*/
        top: 50%;
        left: 50%;
        margin-top: -50px;  /*返回一半的高度*/
        margin-left: -50px;  /*返回一半的宽度*/
    }

**3. css3动画调整**  
这个方法跟上一个雷同，优点在于代码量少一行和不需要计算数值。同样的，父元素`relative`相对定位，子元素`absolute`绝对定位，上左各50%，然后用css3的`translate(-50%, -50%)`在x、y轴上各返回本身的一半位移。

.parent { 
        width: 200px;
        height: 200px;
        background-color: #ADD8E6;
        position: relative;  /*相对定位*/
    }
    .son { 
        width: 100px;
        height: 100px;
        background-color: #DB7093;
        position: absolute;  /*绝对定位*/
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /*x、y轴返回元素一半的位移*/
    }

**4. flex弹性布局调整**  
最后一种方法个人觉得是较高级的写法。html5提供了广受开发者喜爱的`flex`弹性布局属性，功能十分强大实用。要实现元素水平垂直居中，只要父元素设置弹性布局，用`justify-content`和`align-items`属性调整主轴、副轴上居中。

.parent { 
        width: 200px;
        height: 200px;
        background-color: #ADD8E6;
        display: flex;  /*弹性布局*/
        justify-content: center;  /*子元素水平居中*/
        align-items: center;  /*子元素垂直居中*/
    }
    .son { 
        width: 100px;
        height: 100px;
        background-color: #DB7093;
    }

在实战中用多几次就熟练了，十分简单，在面试官前可以挺起胸膛了！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N4aml0_size_16_color_FFFFFF_t_70]: /images/20230528/963d4421b15146be84d4b33fd59b5025.png