CSS水平垂直居中解决方案(6种)

创建元素

<div class="parent">

<div class="child">child</div>

</div>

垂直水平居中方案一：知道宽度的情况下 absolute+margin负值

.parent {

width:400px;

height:400px;

background: red;

position: relative;

}

.child {

position: absolute;

left:50%;

top:50%;

background: yellow;

width:50px;

height:50px;

margin-left:-25px;

margin-top:-25px;

}

垂直水平居中方案二：不知道宽高的情况下 absolute+transform

.parent {

width:400px;

height:400px;

background: red;

position: relative;

}

.child {

position: absolute;

left:50%;

top:50%;

transform: translate(-50%,-50%);

}

垂直居中方案三：position+margin:auto

.parent {

position:relative;

width:200px;

height:200px;

background: red;

}

.child {

width:80px;

height:40px;

background: yellow;

position: absolute;

left:0;

top:0;

right:0 ;

bottom:0;

margin:auto;

}

垂直居中方案四：+ 多行文本的垂直居中 :table-cell+vertical-align:middle;

.parent {

height: 300px;

width:400px;

border: 1px solid red;

display: table-cell;

vertical-align: middle;

text-align: center;

}

.child {

display: inline-block;

width:50px;

height:50px;

background: blue;

}

/* 或者 */

.parent {

width: 400px;

height: 300px;

display: table-cell;

vertical-align: middle;

border: 1px solid red;

text-align: center;

}

.child {

display: inline-block;

vertical-align: middle;

background: blue;

}

垂直居中方案五：display: flex

.parent {

width:400px;

height:200px;

background:red;

display: flex;

justify-content:center;

align-items:center;

}

.child {

height:100px;

width:100px;

background:green;

}

垂直居中方案六：伪元素

.parent {

width:200px;

height:200px;

background:red;

text-align: center;

}

.child {

height:100px;

width:100px;

background:yellow;

display: inline-block;

vertical-align: middle;

}

.parent:before {

content:"";

height:100%;

vertical-align: middle;

display: inline-block;

}

以上就是本文的全部内容，希望对大家的学习有所帮助。