div在父元素中的居中问题

方法一：定位方法

 

<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;
    font-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%);
        }

　　方法四：利用flex布局

 

<div class="parent4">
    <div class="child4">
        content4
    </div>
</div>
.parent4{
    display:flex;
    justify-content:center;
    align-items:center;
    height:300px;
     width:300px;
    background:red;
}
.child4{
    background:yellow;

}

　　

 

转载于:https://www.cnblogs.com/hl2016-10-28/p/8350757.html