導(dǎo)引:
方案一 { keyword: padding & margin }
方案二 { keyword: vertical-align }
方案三 { keyword: absolute | relative }
方案四 { keyword: flex }
方案五(文字垂直居中) { keyword: text-align | line-height }
方案一{ keyword: padding & margin }
提要簡(jiǎn)介: 運(yùn)用 padding(父容器) + margin (子元素) + text-align:center;(父容器的子元素是內(nèi)聯(lián)元素時(shí))
應(yīng)用場(chǎng)景一:
- 父元素 和 子元素 都是 塊級(jí)元素
- 父元素 寬度(可定也不不定), 高度不定.
<!-- html -->
<div class="parent">
<div class="son"></div>
</div>
/* css */
.parent {
background: #ddd;
width: 300px;
padding: 40px 0; /* 父容器用padding擠壓子元素 實(shí)現(xiàn)子元素垂直居中 */
}
.son {
width: 50px;
height: 50px;
background: red;
margin: 0 auto; /* 塊級(jí)子元素 水平居中 */
}
示圖:
11111.png
應(yīng)用場(chǎng)景二:
- 父元素是塊級(jí)元素, 子元素為內(nèi)聯(lián)元素
- 父元素 寬度(可定可不定), 高度不定.
<!-- html -->
<div class="parent">
<span>x</span>
</div>
/* css */
.parent {
background: #ddd;
width: 300px;
text-align: center; // 使父容器內(nèi)的 內(nèi)聯(lián)元素水平居中
padding: 40px 0; // 父元素不定高度值, 由padding把內(nèi)聯(lián)子元素?cái)D到垂直居中
}
.parent span {
width: 50px;
height: 50px;
background: red;
}
示圖:
22222.png
方案二 { keyword: vertical-align }
運(yùn)用
vertical-align: middle;(垂直方向) 和 父容器設(shè)置text-align:center(水平方向)
應(yīng)用場(chǎng)景一:
- 子元素 必須是 內(nèi)聯(lián) 或 內(nèi)聯(lián)塊元素
- 水平居中交給 --> 父元素:
text-align:center; - 垂直居中交給 -->
vertical-align: middle;父元素 利用 偽類元素 作為參考 來 和 子元素 垂直居中對(duì)齊.
<!-- html -->
<div class="parent">
<div class="son"></div>
</div>
/* css */
.parent {
background: #ddd;
width: 300px;
height: 300px;
text-align: center; /* 讓內(nèi)聯(lián)子元素水平居中對(duì)齊 */
vertical-align: middle; /* 對(duì)齊方式為 垂直居中 */
}
.parent .son {
display: inline-block;
width: 50px;
height: 50px;
background: red;
vertical-align: middle; /* 對(duì)齊方式為 垂直居中 */
}
.parent::after {
content: "";
display: inline-block;
height: 100%;
width: 1px;
background: green;
vertical-align: middle; /* 對(duì)齊方式為 垂直居中 */
}
示圖
33333.png
方案三 { keyword: absolute | relative }
運(yùn)用
position: relative | absolute ;和transform: translate: (-50%, -50%);的實(shí)現(xiàn)方案.
應(yīng)用場(chǎng)景一: relative
- 子元素可以是 內(nèi)聯(lián) 或 塊級(jí)元素
- 父元素 寬高固定
- 子元素調(diào)用css3樣式: transform
<!-- html -->
<div class="parent">
<div class="son">x</div>
</div>
/* css */
.parent {
background: #ddd;
width: 300px;
height: 300px;
}
.son {
display: inline | inline-block | block; /* 子元素為 塊級(jí) 和 內(nèi)聯(lián) 都可以 */
width: 50px;
height: 50px;
background: red;
position: relative; /* 相對(duì)定位,子元素默認(rèn)位置是在左上角 */
top: 50%; /* 子元素頂線 對(duì)齊 父元素的水平中線 */
left: 50%; /* 子元素的左側(cè)邊線 對(duì)齊 父元素的垂直中線 */
transform: translate(-50% ,-50%); /* 子元素以 參考自身寬高 來計(jì)算 變形位移距離 */
}
示圖:
44444.png
應(yīng)用場(chǎng)景二: absolute
- 子元素可以是 內(nèi)聯(lián) 或 塊級(jí)元素
- 父元素 寬高固定
- 子元素調(diào)用css3樣式: transform
<!-- html -->
<div class="parent">
<div class="son">x</div>
</div>
/* css */
.parent {
background: #ddd;
width: 300px;
height: 300px;
position: relative; /* 父元素設(shè)置為 子元素的定位參考,必不可少 */
}
.son {
display: inline | inline-block | block; /* 子元素為 塊級(jí) 和 內(nèi)聯(lián) 都可以 */
width: 50px;
height: 50px;
background: red;
position: absolute; /* 絕對(duì)定位,子元素默認(rèn)位置是在左上角 */
top: 50%; /* 子元素頂線 對(duì)齊 父元素的水平中線 */
left: 50%; /* 子元素的左側(cè)邊線 對(duì)齊 父元素的垂直中線 */
transform: translate(-50% ,-50%); /* 子元素以 參考自身寬高 來計(jì)算 變形位移距離 */
}
示圖:
55555.png
方案四 { keyword: flex }
提要: 運(yùn)用 flex 布局, 主軸對(duì)齊調(diào)用 justify-content, 側(cè)軸(交叉軸)對(duì)齊 align-items.
應(yīng)用場(chǎng)景一:
- 父子元素 塊級(jí) 內(nèi)聯(lián)都可以
- 水平居中: justify-content: center;
- 垂直居中: align-items: center;
<!-- html -->
<div class="box">
<div class="son"></div>
</div>
/* css */
.box {
width: 400px;
height: 400px;
background: #ddd;
border: 1px solid red;
display: flex; /* 元素設(shè)置為flex, 此元素的 display:felx */
justify-content: center; /* 水平居中設(shè)置 */
align-items: center; /* 垂直居中設(shè)置 */
}
.box .son {
width: 100px;
height: 100px;
background: blue;
}
圖示:
3123123.jpg
方案五(文字垂直居中) { keyword: text-align | line-height }
提要: 文字居中 依據(jù) 父元素 text-align, 子元素里 line-height;
應(yīng)用場(chǎng)景一:
- 父子元素 塊級(jí) 內(nèi)聯(lián)都可以
- 水平居中: 父容器
text-align: center; - 垂直居中: 文字標(biāo)簽
line-height: (number= wrapper.height) px ;
<!-- html -->
<div class="box">
<p>xxxxx</p>
</div>
/* css */
* { /* 設(shè)置通類,必須 */
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box {
border: 1px solid red;
width: 100px;
height: 100px;
background: #ddd;
text-align: center; /* 文字水平居中 */
}
.box p {
line-height: 100px; /* 文字垂直方向居中,參數(shù)等于父容器高度值 */
}
圖示:
77777.png
