css 子元素div（已知宽高、未知宽高）垂直居中父元素div
一、已知子元素div宽度和高度
1、子绝父相（子元素绝对定位，父元素相对定位）
2、left：50% top：50%
3、margin-left：自己宽度一半 margin-top：自己高度一半
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子div水平垂直居中</title>
<style>
.outer {
width: 200px;
height: 200px;
background: pink;
position: relative;
}
.inner {
width: 50px;
height: 50px;
background: green;
position: absolute;
left: 50%;
top: 50%;
margin-left: -25px;
margin-top: -25px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
子
</div>
</div>
</body>
</html>二、未知子元素div宽度和高度
子绝父相，然后用css3中的transform属性设置translate的值来居中
.inner {
background: green;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
}三、利用display: flex实现子div大小不固定垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子div水平垂直居中</title>
<style>
.outer {
width: 200px;
height: 200px;
background: pink;
display: flex;
justify-content: center;/*实现水平居中*/
align-items:center; /*实现垂直居中*/
}
.inner {
width: 50px;
height: 50px;
background: green;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
子
</div>
</div>
</body>
</html>
css 文字水平垂直居中（父元素div已知宽高和未知宽高）： https://blog.csdn.net/qq_40015157/article/details/113844403