Skip to content

总结DIV框 html/CSS垂直水平居中的办法

第一种:定位+cala(固定宽高)
html
<div class="box">
    <div class="content"></div>
</div>
css
.box{
    width:200px;
    height:200px;
    border:1px solid black;
    position:relative;
}
.content{
    width:100px;
    height:100px;
    background:red;
    position:absoulute;
    top:calc(50%-50px);
    left:calc(50%=50px);
}
第二种:定位+margin:auto(不定宽高)
css
.box{
    width:200px;
    height:200px;
    border:1px solid black;
    position:relative;
}
.content{
    width:100px;
    height:100px;
    background:red;
    position:absoulute;
    margin:auto;
    left:0;
    right:0;
    top:0;
    bottom:0;
}
第三种:transfrom(不定宽高)
css
.box{
    width:200px;
    height:200px;
    border:1px solid black;
    position:relative;
}
.content{
    width:100px;
    height:100px;
    background:red;
    position:absoulute;
    left:50%;
    top:50%;
    transfrom:translate(-50%,-50%);
}
第四种,使用flex
css
.box{
    border:1px solid black;
    width: 200px;
    height: 200px;
    display:flex;
}
.content{
    width: 100px;
    height: 100px;
    background:red;
    margin:auto;
}

总结框内的文本居中

  • 第一种,(单行文本)
html
<div class='box'></div>
css
.box{
    height:20px;
    line-height:20px;
}
  • 第二种,(多行文本)
html
<div class="box">
    <div class="content"></div>
</div>
css
.box{
    display:table;
}
.content{
    display: table-cell;
    vertical-align:middle;
    text-align:center;
}

Released under the MIT License.