老闆的手機收到乙個紅包，為什麼紅包沒居中？
如何讓乙個子元素在父容器裡水平垂直居中？這個問題必考，在實戰開發中，也應用得非常多。
你也許能順手寫出好幾種實現方法。但大部分人的寫法不夠規範，經不起千錘百鍊。換句話說：這些人也就面試的時候夸夸其談，但真的上戰場的時候，他們不敢這麼寫，也不知道怎麼寫最靠譜。
這篇文章中，我們來列出幾種常見的寫法，最終你會明白，哪種寫法是最優雅的。
當然，我還會拿出實際應用中的真實場景來舉例，讓你感受一下標準垂直居中的魅力。
行內元素的居中問題比較簡單。給父容器設定：
text-align: center;讓文字的行高 等於 盒子的高度，可以讓單行文字垂直居中。比如：
.father
在 css 中對元素進行水平居中是非常簡單的：如果它是乙個行內元素，就對它的父容器應用text-align: center；如果它是乙個塊級元素，就對它自身應用margin: auto或者margin: 0 auto。
在這裡，margin: auto相當於margin: auto auto auto auto。margin: 0 auto相當於margin: 0 auto 0 auto，四個值分別對應上右下左。其計算值取決於剩餘空間。
但是，如果要對乙個元素垂直居中，margin: auto就行不通了。
比如下面這段**：
lang="en">
>
charset="utf-8">
name="viewport" content="width=device-width, initial-scale=1.0">
>document>
>.father
.son
>
>
>
class="father">
class="son">>
>
>>
>
>
上面的**中，父元素和子元素都是定寬高的，即便在這種情況下，我給子元素設定margin: auto，子元素依然沒有垂直居中。
那還有沒有比較好的通用的做法呢？
lang="en">
>
charset="utf-8">
name="viewport" content="width=device-width, initial-scale=1.0">
>document>
>*
.father
.son
>
>
>
class="father">
class="son">子元素的內容》
>
>>
>
>
**解釋：我們先讓子元素的左上角居中，然後向上移動寬度的一半(50px)，就達到了垂直居中的效果；水平居中的原理類似。
不足之處：要求指定子元素的寬高，才能寫出margin-top和margin-left的屬性值。
但是，在通常情況下，對那些需要居中的元素來說，其寬高往往是由其內容來決定的，不建議固定寬高。
lang="en">
>
charset="utf-8">
name="viewport" content="width=device-width, initial-scale=1.0">
>document>
>*
.father
.son
>
>
>
class="father">
class="son">子元素的內容》
>
>>
>
>
這種寫法，在沒有指定子元素寬高的情況下，也能讓其在父容器中垂直居中。因為 translate() 函式中使用百分比值時，是以這個元素自身的寬度和高度為基準進行換算和移動的（動態計算寬高）。
將父容器設定為 flex 布局，再給父容器加個屬性justify-content: center，這樣的話，子元素就能水平居中了；再給父容器加個屬性align-items: center，這樣的話，子元素就能垂直居中了。
**舉例：
lang="en">
>
charset="utf-8">
name="viewport" content="width=device-width, initial-scale=1.0">
>document>
>*
.father
.son
>
>
>
class="father">
class="son">子元素的內容》
>
>>
>
>
上面這種寫法，不足之處在於：給父容器設定屬性justify-content: center和align-items: center之後，導致父容器裡的所有子元素們都垂直居中了（如果父容器裡有多個子元素的話）。可我明明想讓指定的某個子元素居中，要怎麼改進呢？
我們只需寫兩行宣告即可：先給父容器設定display: flex，再給指定的子元素設定我們再熟悉不過的margin: auto，即可讓這個指定的子元素在剩餘空間裡，水平垂直居中。大功告成。
**舉例：
lang="en">
>
charset="utf-8">
name="viewport" content="width=device-width, initial-scale=1.0">
>document>
>*
.father
.son
>
>
>
class="father">
class="son">子元素的內容，想水平垂直居中》
class="son2">這個元素不想水平垂直居中》
>
>>
>
>
請注意，當我們給父容器使用 flex 布局 時，子元素的margin: auto不僅能讓其在水平方向上居中，垂直方向上也是居中的。
參考文章：探秘 flex 上下文中神奇的自動 margin
就拿「彈窗」這一點來說，現在大家的彈窗都是各種樣式、各種布局滿天飛。不過進公司後，新人在第一次寫彈窗之前，都會問乙個問題：「彈窗這麼通用的東西，沒有乙個規範嗎？」說完之後，又默默寫自己的有個性的彈窗去了。
建議大家在寫彈窗的時候，無論如何，一定要嚴格採用水平居中、垂直居中的寫法。
千萬不要用margin-top這種距離螢幕頂部的距離來計算彈窗的位置，太搓了。不要讓領導覺得：「你們寫了這麼久的前端**，連個彈窗都搞不定？」
移動端場景，這裡提供乙個 紅包幕簾/彈窗 的居中寫法。注意，是嚴格居中，非常標準。為什麼是移動端？你有見過pc網頁端給你送紅包的麼？
在實戰開發中，下面的這段**，可以直接拿去用。注釋詳細，貼心無比。
lang="en">
>
charset="utf-8" />
name="viewport" content="width=device-width, initial-scale=1.0" />
>document>
>/* 整個彈窗元件 */
.component_popup
/* 遮罩背景 */
.popup_mask
/* 彈窗區域（內容 + close）：嚴格居中 */
.popup_content
/* 彈窗的內容部分 */
.content_box
/* 彈窗的close圖示 */
.content_close
>
>
>
class="content">預設文件流中的頁面主體》
class="component_popup">
class="popup_mask">>
class="popup_content">
class="content_box">>
class="content_close
如何讓乙個元素水平垂直居中？
這問題大概分為兩種型別，看要求，元素有沒有被設定寬高 1.利用絕對定位 box2.先把元素的左上角定位到 點，在向左和上移動自身寬高的一半 使用margin box3.先把元素的左上角定位到 點，在向左和上移動自身寬高的一半 使用transform平移 box4.先把元素的左上角定位到 點，在向左和...
學習中的問題 04如何居中乙個元素？
在做頁面布局的時候，經常會遇到使乙個元素居中這種情況，今天系統的總結一下。水平居中 為其父元素設定屬性text align center 垂直居中 height和line height的值相同，只寫line height也是可以的。水平居中 如果這個塊級元素給了寬度，那麼應用margin 0 aut...
讓乙個元素消失的辦法
1 最常用之 display none 給元素設定display none 後，元素會從頁面中徹底消失，它原本佔據的空間會被其他元素占有，會造成瀏覽器的回流與重繪。2 最常用之 visibility hidden 給元素設定visibility hidden 後，元素會從頁面中消失，它原本佔據的空間...