大家好，我是IT修真院上海分院3期的学员，一枚正直纯洁善良的web前端程序员
今天给大家分享一下，修真院官网css任务8的知识点——css有哪些方式可以实现垂直居中？
1.背景介绍
居中是前端排版的一个重要话题，今天我们就来梳理一下垂直居中的方法。
2.知识剖析
布局的解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性+flexbox，咱们就从这几点入手。
3.常见问题
垂直居中的方式
4. 解决方案
HTML如下：
<div class="wrap">
<div class="sub">
<span>IT修真院</span>
</div>
</div>
默认的ss样式：
.wrap{
width:600px;
height:600px;
background:#b442e9;
}
.sub{
font-size:5rem;
background:#e7e6f0;
}
方法1：只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了。
.sub{
height:400px;
line-height:400px;
}
方法2：position:relative 子元素必须设置高度
.wrap{
position:relative;
}
.sub{
position:absolute;
top:0;
bottom:0;
margin:auto;
height:100px;
}
方法3：position：relative
.wrap{
position:relative;
}
.sub{
position:absolute;
top:50%;
margin-top:-50px;
height:100px;
}
方法4：position： relative 类似上一中方法
.wrap{
position:relative;
}
.sub{
position:absolute;
top:50%;
transform:translateY(-50%);
}
方法5： calc
.sub{
position:relative;
height:100px;
top:calc(50% -50px);
}
方法6：父元素设置flex
.wrap{
display:flex;
align-items:center;
}
方法7：父元素设置flex，子元素margin：auto
.wrap{
display:flex;
}
.sub{
margin:auto;
}
方法8： table布局 父元素设置table，子元素设置table-cell
.wrap{
display:table;
}
.sub{
display:table-cell;
vertical-align:middle;
}
方法9：伪类
.wrap:after{
content:"";
display:inline-block;
height:100%;
vertical-align:middle;
}
.sub{
display:inline;
vertical-align:middle;
}
5.编码实战
参考第4步
6.扩展思考
如何水平、垂直居中？
方法1：text—align配合verti-align
.sub{
width:100%;
text-align:center;
line-height:600px;
}
方法二： position方法
.wrap{
position:relative;
}
.sub{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
方法三： position
.wrap{
position:relative;
}
.sub{
position:absolute;
width:200px;
height:200px;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
方法四： flex
.wrap{
display:flex;
justify-content:center;
align-items:center;
}
7.参考文献
参考2：CSS 垂直居中
PPT
视频
undefined_腾讯视频
网友评论