未知高度元素水平居中的办法

一般未知高度元素水平居中的方法常见的有三个方法

（1）不知道自己高度和父容器高度的情况下, 利用绝对定位只需要以下三行：

parentElement{

position:relative;

}

childElement{

position: absolute;

top: 50%;

left：50%；

transform: translateY(-50%);

}

（2）若父容器下只有一个元素，且父元素设置了高度，则只需要使用相对定位即可

parentElement{

height:xxx;

}

.childElement {

position: relative;

top: 50%;

left：50%；

transform: translateY(-50%);

}

（3）Flex 布局：

不考虑兼容老式浏览器的话，用Flex布局简单直观一劳永逸：

parentElement{

display: flex;

justify-content: center;

align-items: center;

}