css实现元素水平垂直居中

记录两个思路，当然还有其他方法，如果用到再补充：

<div class="parent"  style="background:red;width:200px;height:100px;">

<div class="child" style="background:lightblue;">测试文字</div></div>

1.在伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items

.parent{

display: flex;

justify-content: center; 

align-items: center;}

2.使用position:absolute;

(1)不考虑子元素和父元素的宽高

.parent{

position:relative;

}

.child{

position:absolute;

top:0;

right:0;

bottom:0;

left:0;

margin:auto;

}

(2)子元素宽高固定

.parent{

position: relative;}

.child{

position: absolute;

top: 50%;

left: 50%;

width: 80px;

height: 60px;

margin-left: -40px;

margin-top: -30px;}

3.

text-align + line-height实现单行文本水平垂直居中

.test{

text-align: center;

line-height: 100px;}