CSS中水平垂直居中的4种方式

水平垂直居中方法1

在已知被居中元素宽高的时候：在定位的时候，直接使用calc方法计算left的百分之50，减去自身宽高的一半，一次性定位结束

HTML部分

 <div class="box">
      <div class="con"></div>
 </div>

CSS部分

.box{
    width:700px;
    height:500px;
    background-color:pink;
    margin: 40px auto;
    position: relative;
}
.con{
    width:300px;
    height: 200px;
    background-color: #009ff2;
    position: absolute;
    left:calc(50% - 150px);
    top:calc(50% - 100px);
}

水平垂直居中方法2

在已知被居中元素的宽高的时候：在定位的时候，定位设置50%，里边元素的左上角在容器的正中心，需要将元素向左和上移动自身的一半，达到居中，使用margin负值将元素移动（需要自己算出来一半是多少）

HTML部分

<div class="box">
        <div class="con"></div>
</div>

CSS部分

.box{
      width: 700px;
      height: 500px;
      bakground-color: pink;
      margin: 40px auto;
      position: relative;
}
.con{
       width: 300px;
       height: 200px;
       background-color: #009ff2;
       position: absolute;
       left:50%;
       right:50%;
       margin-left: -150px;
       margin-top: -100px;
}

水平垂直居中方法3

在不知道被居中元素的宽高的时候：在定位的时候，定位设置50%，里边元素的左上角在容器的正中心，需要将元素向左和上移动自身的一半，达到居中
使用变形transform属性里的位移值translate，translate的百分比是参考自身宽高的，所以不需要知道元素宽高即可

HTML部分

<div class="box">
        <div class="con"></div>
</div>

CSS部分

.box{
        width: 700px;
        height: 500px;
        background-color: pink;
        margin: 40px auto;
        position: relative;
}
.con{
        width:300px;
        height:200px;
        background-color: #009ff2;
        position: absolute;
        left:50%;
        top:50%;
        /*transform是变形的属性，里面包含一个位移的值，百分比是相对自身宽高的*/
        transform:translate(-50%,-50%);
}

水平垂直居中方法4

当绝对定位元素没有设置宽高的时候，我们设置了left和right 或者同时设置了top和bottom，那么元素就会自适应的把自身的宽高撑开，来达到相应的要求

HTML部分

<div class="box">
        <div class="con"></div>
</div>

CSS部分

.box{
        width: 700px;
        height: 500px;
        background-color: pink;
        margin: 40px auto;
        position: relative;
 }
.con{
        width: 300px;
        height: 200px;
        background-color: #009ff2;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
}

效果图

实现的效果图如上

最后编辑于：2019.11.25 20:37:44