web前端之css水平居中代碼解析
我要評論前言
老板的手機(jī)收到一個(gè)紅包，為什么紅包沒居中？
如何讓一個(gè)子元素在父容器里水平垂直居中？這個(gè)問題必考，在實(shí)戰(zhàn)開發(fā)中，也應(yīng)用得非常多。
你也許能順手寫出好幾種實(shí)現(xiàn)方法。但大部分人的寫法不夠規(guī)范，經(jīng)不起千錘百煉。換句話說：這些人也就面試的時(shí)候夸夸其談，但真的上戰(zhàn)場的時(shí)候，他們不敢這么寫，也不知道怎么寫最靠譜。
這篇文章中，我們來列出幾種常見的寫法，最終你會(huì)明白，哪種寫法是最優(yōu)雅的。
當(dāng)然，我還會(huì)拿出實(shí)際應(yīng)用中的真實(shí)場景來舉例，讓你感受一下標(biāo)準(zhǔn)垂直居中的魅力。
如何讓一個(gè)行內(nèi)元素（文字、圖片等）水平垂直居中
行內(nèi)元素的居中問題比較簡單。
行內(nèi)元素水平居中
給父容器設(shè)置：
text-align: center;
行內(nèi)元素垂直居中
讓文字的行高 等于 盒子的高度，可以讓單行文本垂直居中。比如：
.father {
height: 20px;
line-height: 20px;
}
如何讓一個(gè)塊級(jí)元素水平垂直居中
這一段是本文的核心。如何讓一個(gè)塊級(jí)的子元素在父容器里水平垂直居中？有好幾種寫法。我們一起來看看。
margin: auto 的問題
在 CSS 中對元素進(jìn)行水平居中是非常簡單的：如果它是一個(gè)行內(nèi)元素，就對它的父容器應(yīng)用 text-align: center；如果它是一個(gè)塊級(jí)元素，就對它自身應(yīng)用 margin: auto或者 margin: 0 auto。
在這里，margin: auto相當(dāng)于margin: auto auto auto auto。margin: 0 auto相當(dāng)于margin: 0 auto 0 auto，四個(gè)值分別對應(yīng)上右下左。其計(jì)算值取決于剩余空間。
但是，如果要對一個(gè)元素垂直居中，margin: auto就行不通了。
比如下面這段代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
height: 500px;
background: pink;
}
.son {
width: 300px;
height: 200px;
background: red;
margin: auto;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script></script>
</body>
</html>
上面的代碼中，父元素和子元素都是定寬高的，即便在這種情況下，我給子元素設(shè)置 margin: auto，子元素依然沒有垂直居中。
那還有沒有比較好的通用的做法呢？
方式一：絕對定位 + margin（需要指定子元素的寬高，不推薦）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.father{
position: relative;
min-height: 500px;
background: pink;
}
.son {
position: absolute;
width: 200px;
height: 100px;
background: red;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son">子元素的內(nèi)容</div>
</div>
<script></script>
</body>
</html>
代碼解釋：我們先讓子元素的左上角居中，然后向上移動(dòng)寬度的一半(50px)，就達(dá)到了垂直居中的效果；水平居中的原理類似。
不足之處：要求指定子元素的寬高，才能寫出 margin-top 和 margin-left 的屬性值。
但是，在通常情況下，對那些需要居中的元素來說，其寬高往往是由其內(nèi)容來決定的，不建議固定寬高。
方式二：絕對定位 + translate（無需指定子元素的寬高，推薦）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.father{
position: relative;
min-height: 500px;
background: pink;
}
.son {
position: absolute;
background: red;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="father">
<div class="son">子元素的內(nèi)容</div>
</div>
<script></script>
</body>
</html>
這種寫法，在沒有指定子元素寬高的情況下，也能讓其在父容器中垂直居中。因?yàn)?translate() 函數(shù)中使用百分比值時(shí)，是以這個(gè)元素自身的寬度和高度為基準(zhǔn)進(jìn)行換算和移動(dòng)的（動(dòng)態(tài)計(jì)算寬高）。
方式3：flex 布局（待改進(jìn)）
將父容器設(shè)置為 Flex 布局，再給父容器加個(gè)屬性justify-content: center，這樣的話，子元素就能水平居中了；再給父容器加個(gè)屬性 align-items: center，這樣的話，子元素就能垂直居中了。
代碼舉例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.father{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: pink;
}
.son {
background: red;
}
</style>
</head>
<body>
<div class="father">
<div class="son">子元素的內(nèi)容</div>
</div>
<script></script>
</body>
</html>
上面這種寫法，不足之處在于：給父容器設(shè)置屬性justify-content: center和align-items: center之后，導(dǎo)致父容器里的所有子元素們都垂直居中了（如果父容器里有多個(gè)子元素的話）?？晌颐髅飨胱屩付ǖ?strong>某個(gè)子元素居中，要怎么改進(jìn)呢？
方式4： flex 布局 + margin: auto（推薦）
我們只需寫兩行聲明即可：先給父容器設(shè)置 display: flex，再給指定的子元素設(shè)置我們再熟悉不過的 margin: auto，即可讓這個(gè)指定的子元素在剩余空間里，水平垂直居中。大功告成。
代碼舉例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.father{
display: flex;
min-height: 100vh;
background: pink;
}
.son {
margin: auto;
background: red;
}
</style>
</head>
<body>
<div class="father">
<div class="son">子元素的內(nèi)容，想水平垂直居中</div>
<div class="son2">這個(gè)元素不想水平垂直居中</div>
</div>
<script></script>
</body>
</html>
請注意，當(dāng)我們給父容器使用 Flex 布局 時(shí)，子元素的margin: auto不僅能讓其在水平方向上居中，垂直方向上也是居中的。
參考文章：探秘 flex 上下文中神奇的自動(dòng) margin
垂直居中的典型應(yīng)用場景：紅包幕簾/彈窗
問題引入
就拿“彈窗”這一點(diǎn)來說，現(xiàn)在大家的彈窗都是各種樣式、各種布局滿天飛。不過進(jìn)公司后，新人在第一次寫彈窗之前，都會(huì)問一個(gè)問題：“彈窗這么通用的東西，沒有一個(gè)規(guī)范嗎？”說完之后，又默默寫自己的有個(gè)性的彈窗去了。
建議大家在寫彈窗的時(shí)候，無論如何，一定要嚴(yán)格采用水平居中、垂直居中的寫法。
千萬不要用 margin-top 這種距離屏幕頂部的距離來計(jì)算彈窗的位置，太搓了。不要讓領(lǐng)導(dǎo)覺得：“你們寫了這么久的前端代碼，連個(gè)彈窗都搞不定？”
移動(dòng)端，紅包幕簾/彈窗 居中的規(guī)范寫法（非常標(biāo)準(zhǔn)）
移動(dòng)端場景，這里提供一個(gè) 紅包幕簾/彈窗 的居中寫法。注意，是嚴(yán)格居中，非常標(biāo)準(zhǔn)。為什么是移動(dòng)端？你有見過PC網(wǎng)頁端給你送紅包的么？
在實(shí)戰(zhàn)開發(fā)中，下面的這段代碼，可以直接拿去用。注釋詳細(xì)，貼心無比。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 整個(gè)彈窗組件 */
.component_popup {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
}
/* 遮罩背景 */
.popup_mask {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
}
/* 彈窗區(qū)域（內(nèi)容 + close）：嚴(yán)格居中 */
.popup_content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 彈窗的內(nèi)容部分 */
.content_box {
width: 15.45rem;
height: 19.32rem;
background: url(http://img.smyhvae.com/20191010_1500_red-packet.png) no-repeat;
background-size: 15.45rem 19.32rem;
}
/* 彈窗的close圖標(biāo) */
.content_close {
width: 1.25em;
height: 1.25em;
background: url(http://img.smyhvae.com/20191010_1500_close.png) no-repeat;
background-size: 1.25rem 1.25rem;
margin: 0 auto;
margin-top: 0.5rem;
}
</style>
</head>
<body>
<div class="content">默認(rèn)文檔流中的頁面主體</div>
<div class="component_popup">
<div class="popup_mask"></div>
<div class="popup_content">
<div class="content_box"></div>
<div class="content_close"></div>
</div>
</div>
</body>
</html>
實(shí)現(xiàn)效果：
補(bǔ)充：
1、如果你的頁面中，有很多彈窗，建議將彈窗封裝成一個(gè)抽象組件。
2、任何彈窗，都需要解決“滾動(dòng)穿透”的問題，本文篇幅有限，請自行查閱。
最后一段
有些實(shí)現(xiàn)方式雖然簡單，但必須要經(jīng)得起千錘百煉。我們要做到敬畏每一行代碼，不能浮于表面。團(tuán)隊(duì)開發(fā)，要的不是個(gè)性，而是標(biāo)準(zhǔn)和規(guī)范。
參考鏈接
為什么「margin:auto」可以讓塊級(jí)元素水平居中？
margin:auto實(shí)現(xiàn)絕對定位元素的水平垂直居中
以上就是web前端之css水平居中代碼解析的詳細(xì)內(nèi)容，更多關(guān)于css水平居中的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
使用CSS實(shí)現(xiàn)盒子水平垂直居中的方法(8種)
這篇文章主要介紹了使用CSS實(shí)現(xiàn)盒子水平垂直居中的方法(8種)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來2020-11-11- 這篇文章主要介紹了CSS 水平居中并限定最大的寬度實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)2020-09-14
CSS實(shí)現(xiàn)子元素div水平垂直居中的示例
這篇文章主要介紹了CSS實(shí)現(xiàn)子元素div水平垂直居中的示例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起2020-09-03
CSS中的translate(-50%,-50%)實(shí)現(xiàn)水平垂直居中效果
這篇文章主要介紹了CSS中的translate(-50%,-50%)實(shí)現(xiàn)水平垂直居中效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以2020-09-02css3 flex實(shí)現(xiàn)div內(nèi)容水平垂直居中的幾種方法
這篇文章主要介紹了css3 flex實(shí)現(xiàn)div內(nèi)容水平垂直居中的幾種方法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小2020-03-27- 這篇文章主要介紹了CSS3 不定高寬垂直水平居中的幾種方式,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起2020-03-26
CSS3實(shí)現(xiàn)水平居中、垂直居中、水平垂直居中的實(shí)例代碼
在前端面試中經(jīng)常會(huì)遇到css居中效果的實(shí)現(xiàn)，今天小編給大家分享幾種css垂直水平居中的方法，通過實(shí)例代碼給大家講解，需要的朋友參考下吧2020-02-27
手把手教你CSS水平、垂直居中的10種方式(小結(jié))
這篇文章主要介紹了手把手教你CSS水平、垂直居中的10種方式(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著2019-11-07
