div在父元素中的居中问题

Posted 2020-10-22 hl2016-10-28

方法一：定位方法

 

<div class="parent1">
    <div class="child1">
        content1
    </div>
</div>

.parent1{
    position:relative;
    height:300px;
     width:300px;
}
.child1{
    position:absolute;
　　top:0px;
　　left:0px;
　　right:0px;
　　bottom:0px;
　　margin:auto;

}

　　

　方法二：设置父元素的css为：display:table;z子元素的为：dispaly:table-cell;vertical-align:middle;text-align:center

　

<div class="parent2">
    <div class="child2">
        content2
    </div>
</div>
.parent2{
    display:table;
    height:300px;
     width:300px;
    background:red;
}
.child2{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    background:green;
    ont-size:16px;

}

　　方法三：利用transform

<div class="parent3">
    <div class="child3">
        content3
    </div>
</div>

.parent3{
            position: relative;
            height:300px;
            width: 300px;
            background: #FD0C70;
        }
        .parent3 .child{
            position: absolute;
            top: 50%;
            left: 50%;
            color: #fff;
            background: green;
            transform: translate(-50%, -50%);
        }