css样式之垂直居中

1.div的水平居中

margin:0 auto

2.table-cell实现垂直居中

样式：.box{
            width: 200px;
            height: 200px;
            background: red;
        }
        .box1{
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
html结构：<div class="box box1">
    <span>垂直居中</span>
</div>

3.display:flex布局的方式

css样式：.box1{
            display: flex;
            justify-content:center;
            align-items:Center;
        }

4.知道div高度和宽度的垂直居中

1.使用绝对定位，高50%，宽50%

2.然后再margin-left div宽度的一半  margin-top div高度的一半

 

5.不知道div高度和宽度的垂直居中

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

 

转载于:https://www.cnblogs.com/wangdahua/p/9650267.html