大家好，我是IT修真院上海分院3期的學(xué)員，一枚正直純潔善良的web前端程序員
今天給大家分享一下，修真院官網(wǎng)css任務(wù)8的知識(shí)點(diǎn)——css有哪些方式可以實(shí)現(xiàn)垂直居中？
1.背景介紹
居中是前端排版的一個(gè)重要話題，今天我們就來(lái)梳理一下垂直居中的方法。
2.知識(shí)剖析
布局的解決方案，基于盒狀模型，依賴(lài) display 屬性 + position屬性 + float屬性+flexbox，咱們就從這幾點(diǎn)入手。
3.常見(jiàn)問(wèn)題
垂直居中的方式
4. 解決方案
HTML如下：
<div class="wrap">
? ? <div class="sub">
? ? ? ? <span>IT修真院</span>
? ? </div>
</div>
默認(rèn)的ss樣式：
.wrap{
width:600px;
height:600px;
background:#b442e9;
}
.sub{
font-size:5rem;
background:#e7e6f0;
}
方法1：只需要簡(jiǎn)單地把 line-height 設(shè)置為那個(gè)對(duì)象的 height 值就可以使文本居中了。
.sub{
height:400px;
line-height:400px;
}
方法2：position:relative 子元素必須設(shè)置高度
.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 類(lèi)似上一中方法
.wrap{
position:relative;
}
.sub{
position:absolute;
top:50%;
transform:translateY(-50%);
}
方法5： calc
.sub{
position:relative;
height:100px;
top:calc(50% -50px);
}
方法6：父元素設(shè)置flex
.wrap{
display:flex;
align-items:center;
}
方法7：父元素設(shè)置flex，子元素margin：auto
.wrap{
display:flex;
}
.sub{
margin:auto;
}
方法8： table布局 父元素設(shè)置table，子元素設(shè)置table-cell
.wrap{
display:table;
}
.sub{
display:table-cell;
vertical-align:middle;
}
方法9：偽類(lèi)
.wrap:after{
content:"";
display:inline-block;
height:100%;
vertical-align:middle;
}
.sub{
display:inline;
vertical-align:middle;
}
5.編碼實(shí)戰(zhàn)
參考第4步
6.擴(kuò)展思考
如何水平、垂直居中？
方法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.參考文獻(xiàn)
參考2：CSS 垂直居中
