h5文字垂直居中_CSS实现居中的几种方式你都了解吗？
CSS（Cascading Style Sheets）層疊樣式表，是在1996年左右，W3C（萬維網聯盟）做HTML標準化的同時在HTML4.0之外開發的，拯救了當時越來越臃腫雜亂的HTML。
本文將按照由簡單至復雜的順序，展示在固定寬高的父容器中，實現單個子元素垂直水平居中的9種方式。
首先的HTML<body>部分都是<div>包含一個<p>：
<div class="box"><p>I'm Centered</p> </div>為了方便觀察，CSS部分默認給<div>加了固定寬高和邊框，給<p>加了底色：
.box {width: 300px;height: 200px;border: 1px solid; } p {background: lightblue; }此時<p>是默認的塊級盒子，撐滿了內容所在的一整行：
默認效果，未居中，p標簽沒到頂是因為自帶了外邊距要達到的效果途徑一:使用grid布局
2. 同樣的，也可以把 justify-items 屬性換成 justify-content ，效果是一樣的
.box {width: 300px;height: 200px;border: 1px solid;display: grid;align-items: center;justify-content: center; } p {background: lightblue; }但它和上一條方法的實現方式略有差別，justify-content 會把子元素所在網格收縮到內容所撐開的寬度，而 justify-items 會把網格撐滿父容器：
justify-content下的網格僅到達內容的寬度justify-items下的網格撐滿父容器3. 直接在子元素上加 margin: auto; 應該是最簡便的方法了，利用子元素的外邊距撐滿父容器
.box {width: 300px;height: 200px;border: 1px solid;display: grid; } p {background: lightblue;margin: auto; }途徑二：使用flex布局
4. flex布局的方法和grid很像，但是flex布局中沒有 justify-items ，所以只能用 justify-content 啦
.box {width: 300px;height: 200px;border: 1px solid;display: flex;align-items: center;justify-content: center; } p {background: lightblue; }5. 同樣的，也可以在子元素上加 margin: auto;
.box {width: 300px;height: 200px;border: 1px solid;display: flex; } p {background: lightblue;margin: auto; }途徑三：使用table-cell布局
6. table-cell布局表現像一個表格的單元格，父容器中加上 vertical-align 垂直居中和文字 text-align 水平居中就是垂直水平居中啦
.box {width: 300px;height: 200px;border: 1px solid;display: table-cell;vertical-align: middle;text-align: center; } p {background: lightblue; }但是這時候會發現一個問題，我們設置的底色卻還是達到了父容器的左右兩端：
底色未居中如果對底色水平居中也有要求，可以把子元素轉換為內聯盒子 inline-block
.box {width: 300px;height: 200px;border: 1px solid;display: table-cell;vertical-align: middle;text-align: center; } p {background: lightblue;display: inline-block; }途徑四：使用絕對定位
7. 子元素設置絕對定位，參考點是父容器，通過 left top 定位到靠中間的位置
.box {width: 300px;height: 200px;border: 1px solid;position: relative; } p {background: lightblue;position: absolute;left: 50%;top: 50%; }定位后的位置，明顯不在中心接著移動子元素，向上向左各一半自己的高度和寬度
.box {width: 300px;height: 200px;border: 1px solid;position: relative; } p {background: lightblue;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%); }移動后，看起來水平居中了，但是垂直還差一點還記得默認效果中<p>為什么沒到頂嗎？是的它的外邊距又來搗亂了，我們把它取消掉就可以完全居中啦
.box {width: 300px;height: 200px;border: 1px solid;position: relative; } p {background: lightblue;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);margin: 0; }途(sǐ)徑(lù)五：不推薦
8. 父容器設置文字水平居中，然后通過偽元素追加一個父容器高度的行高，最后子元素還要轉換為內聯盒子。或者行高加在父容器或子元素中，此時子元素要轉為行內元素或取消外邊距才行。由于過于復雜不推薦，故只展示一種情況的代碼
.box {width: 300px;height: 200px;border: 1px solid;text-align: center; } .box::after {content: '';line-height: 200px; } p {background: lightblue;display: inline-block; }9. 體現CSS魅力的時候到了（霧
.box {width: 300px;height: 200px;border: 1px solid;position: relative; } p {background: lightblue;width: 100px;height: 40px;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto; }這種情況必須要給子元素設置寬高，仿佛所有的屬性都是給底色圍起來的框框設置的……肉眼可見效果并不好，而且代碼繁瑣。它存在的意義就是，當你考古時偶然遇到了，讓你知道前輩費勁巴力寫下的代碼，其實就是想實現一個居中的效果……
你看出它偏了嗎？總結
前面的方法肯定是現在在用的大部分，眼熟后幾種也不至于遇到就一臉萌逼:P
參考文獻
1. 饑人谷 - 居中的多種實現
2. w3school - CSS 簡介
總結
以上是生活随笔為你收集整理的h5文字垂直居中_CSS实现居中的几种方式你都了解吗？的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python提取字符串中数字_EXCEL
- 下一篇： 你知道CSS实现水平垂直居中的第10种方