div垂直居中有几种
1、已知宽高
position: absolute;
left: 50%;
top: 50%;
width:200px;
height:100px;
margin-left:-100px;
margin-top:-50px;
2、宽高未知
方法一:position
#container{
position:relative;
}
#center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
方法二:弹性盒子flex
#container{
display:flex;
justify-content:center;
align-items: center;
}
方法三:translate()
.center {
position: fixed;
top: 50%;
left: 50%;
background-color: #000;
width:50%;
height: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
}
方法四:display: inline-block;
.parent-panel2:after{
content:"";
display: inline-block;
vertical-align: middle;
height: 100%;
}
css3不定宽高水平居中:
在父级元素加3句话,就可以实现子元素水平垂直居中。
justify-content:center;//子元素水平居中
align-items:center;//子元素垂直居中
display:-webkit-flex;
@ cc