垂直居中总方法分为：
一、padding, 通过父级的宽高 - 自身的宽高 然后除以2，就得到padding的计算值
二、定位—
又分为两种：
1.position:absolute;letf :50%;top:50%;transform:translate(-50%,-50%)；
2.position:absolute;letf :50%;top:50%;margin-top:-自身高的一半，margin-left:-自身宽的一半，
三、行高：line-height = height 就可以
四、display:flex–
1.父类：display:flex ,子类margin:auto
2.父类：display:flex justify-content: center;align-items: center;
五、设置display:inline-block,利用 vertical-align: middle的垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vertical-align只对inline/inline-block元素起作用</title>
<style>
.box {
height: 200px;
background: #aaa;
}
.a {
display: inline-block;
height: 100%;
vertical-align: middle;
}
/* 利用伪元素来垂直居中 */
.box11 {
height: 200px;
background: #aaa;
}
.box1 {
height: 200px;
background: #aaa;
}
.box1::after {
content: " ";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.box2 {
height: 
最低0.47元/天 解锁文章
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
