实现元素水平垂直居中的方法

实现单个元素水平垂直居中的方法，在查阅了相关的资料后，进行了相应的整合

 

方法一：使用position定位和margin移位

这是一种最为普通的居中方法。但前提是知道元素确定的宽和高的数值

假设有一个100*100的div，实现水平垂直的代码是：

div{
    width: 100px;
    height: 100px;
    background: red;
}

div{
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -50px;
}

方法二：使用position定位和translate移位

方法一的缺点是需要知道元素的具体数值不能是百分比，但使用translate移位可以很好的解决这个问题，因为translate是根据自身来移位的。方法二的好处是我们不一定需要知道定位元素的具体像素值就可以进行定位。

div{
    width: 20%;
    height: 20%;
    background: red;
}

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

方法三：使用position定位和margin

div{
    width: 100px;
    height: 100px;
    background: red;
}

div{
    position: absolute; 
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0;   
    margin: auto;    /* 有了这个就自动居中了 */  
}

方法四：使用flex定位

前面的三种方法都是操作定位元素本身，该方法则是操作定位元素的父级元素来实现水平垂直的功能。

html,body{
    display: flex;
    justify-content: center; /*实现水平居中*/
    align-items: center; /*实现垂直居中*/
}

div{
    height: 100px;
    width: 100px;
    background-color: red;
}

这里我们进行一点拓展，实际上我们通过calc计算属性可以对方法一进行优化

方法五：使用position定位和clac计算属性

div{
    width: 100px;
    height: 100px;
    background: red;
}

div{
    position: absolute; 
    left: calc(50% - 50px);
    top: calc(50% - 50px);
}

calc() 函数用于动态计算长度值，是一种可以计算%、px、em、rpx值的方法。

具体的使用说明可以参考https://www.runoob.com/cssref/func-calc.html。

 

实际上还有很多种方法可以实现水平垂直居中，我们只需要结合我们所学过的知识，就可以实现，这里仅简单的列举部分方法。