div垂直居中有几种

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