未知高度垂直水平居中

作者: 萘小蒽 | 来源:发表于2020-03-27 10:52 被阅读0次

未知宽高的弹出框，水平垂直居中

 .parrent {
  position:relative;
  width:100%;
  height:600px;
  }
 .child {
  position:absolute;
  top:50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  }

parrent 内的元素水平垂直居中

.parrent  {
    width:500px;
    border:1px solid #888;
}
.child {
    width:100%;
    height:400px;
    border:1px solid #888;
    display: flex;
    align-items: center;
    justify-content: center;
}

parrent 内的元素垂直居中


.parrent{
    width:500px;
    border:1px solid #888;
    display:inline-block;
    vertical-align: middle;
}
.child {
    width:100%;
    height:400px;
    border:1px solid #888;
}
.child :after{
        /**主要代码*/
    content:"";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}