CSS十五種方法教你如何居中一個元素

文主要介紹水平居中，垂直居中，還有水平垂直居中各種辦法，集齊各種常用的居中方法，以備平時工作使用查閱，也歡迎大家更新或者提供建議

水平居中

1.行內元素水平居中

利用 text-align: center 可以實現在塊級元素內部的行內元素水平居中。此方法對inline、inline-block、inline-table和inline-flex元素水平居中都有效。

.parent{
 text-align:center;//在父容器設置
}

此外，如果塊級元素內部包著也是一個塊級元素，我們可以先將其由塊級元素改變為行內塊元素，再通過設置行內塊元素居中以達到水平居中。如下

常常有一些初學者在使用text-align:center時會碰到不生效的問題，如下面的一個例子

p為塊狀元素，所以只需要在p的css代碼里設置display:inline或display:inline-block，將塊狀元素轉為內聯元素即可。對于塊狀元素也可以使用margin:0 auto;來控制居中。

2.塊級元素的水平居中（5種方法）

這種情形可以有多種實現方式，下面我們詳細介紹:

1）將該塊級元素左右外邊距margin-left和margin-right設置為auto

.child{
 width: 100px;//確保該塊級元素定寬
 margin:0 auto;
}

2）使用table+margin

先將子元素設置為塊級表格來顯示（類似），再將其設置水平居中。display:table在表現上類似table元素，實現table一樣的居中效果，但是寬度為內容寬。

<div class="parent">
 <div class="child">Demo</div>
</div>
<style>
 .child {
 display: table;
 margin: 0 auto;
 }
</style>

3）使用absolute+transform

先將父元素設置為相對定位，再將子元素設置為絕對定位，向右移動子元素，移動距離為父容器的一半，最后通過向左移動子元素的一半寬度以達到水平居中。

<div class="parent">
 <div class="child">Demo</div>
</div>
<style>
 .child {
 position:absolute;
 left:50%;
 transform:translateX(-50%);
 }
 .parent {
 position:relative;
 }
</style>

注：不過transform屬于css3內容，兼容性存在一定問題，高版本瀏覽器需要添加一些前綴。

4）使用flex+justify-content

通過CSS3中的布局利器flex中的justify-content屬性來達到水平居中。

<div class="parent">
 <div class="child">Demo</div>
</div>
<style>
 .parent {
 display: flex;
 justify-content:center;
 }
</style>

也會遇到和transform一樣的問題，需要注意瀏覽器的兼容性

5）使用flex+margin

通過flex將父容器設置為為Flex布局，再設置子元素居中。

<div class="parent">
 <div class="child">Demo</div>
</div>
<style>
 .parent {
 display: flex;
 }
 .child {
 margin:0 auto;
 }
</style>

垂直居中

單行內聯元素垂直居中

<div id="box">
 <span>單行內聯元素垂直居中。</span>。
</div>
<style>
 #box {
 height: 120px;
 background: blue;
 line-height: 120px;
 border: 2px dashed #f69c55;
 color: white;
 }
</style>

2.多行內聯元素垂直居中（2種方法）

1）利用flex布局（flex）

利用flex布局實現垂直居中，其中flex-direction: column定義主軸方向為縱向。這種方式在較老的瀏覽器存在兼容性問題。

<div class="parent">
 <p>Dance like nobody is watching, code like everybody is. 
 Dance like nobody is watching, code like everybody is. 
 Dance like nobody is watching, code like everybody is.</p>
</div>
<style>
 .parent { 
 height: 140px;
 display: flex;
 flex-direction: column;
 justify-content: center;
 border: 2px dashed #f69c55;
 }
</style>

2)利用表布局（table）

利用表布局的vertical-align: middle可以實現子元素的垂直居中

<div class="parent">
 <p class="child">The more technology you learn, the more you realize how little you know.
 The more technology you learn, the more you realize how little you know.
 The more technology you learn, the more you realize how little you know.</p>
</div>
 <style>
 .parent {
 display: table;
 height: 140px;
 border: 2px dashed #f69c55;
 }
 .child {
 display: table-cell;
 vertical-align: middle;
 }
</style>

3 塊級元素垂直居中（四種方法）

1）使用absolute+負margin(已知高度寬度)

通過絕對定位元素距離頂部50%，并設置margin-top向上偏移元素高度的一半，就可以實現了。

必須要指定父元素的高度，否則出現高度塌陷的問題

2）使用absolute+transform

當垂直居中的元素的高度和寬度未知時，可以借助CSS3中的transform屬性向Y軸反向偏移50%的方法實現垂直居中。但是部分瀏覽器存在兼容性的問題。

<div class="parent">
 <div class="child">未知高度的塊級元素垂直居中。</div>
</div>
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

3）使用flex+align-items

通過設置flex布局中的屬性align-items，使子元素垂直居中。

<div class="parent">
 <div class="child">未知高度的塊級元素垂直居中。</div>
</div>
.parent {
 display:flex;
 align-items:center;
}

4）使用table-cell+vertical-align

通過將父元素轉化為一個表格單元格顯示（類似 <td> 和 <th>），再通過設置 vertical-align屬性，使表格單元格內容垂直居中。

<div class="parent">
 <div class="child">Demo</div>
</div>
<style>
 .parent {
 display: table-cell;
 vertical-align: middle;
 }
</style>

水平垂直居中（5種方法）

這種情形也是有多種實現方式。

方法1：絕對定位與負邊距實現（已知高度寬度）

注：這種方式需要知道被垂直居中元素的高和寬，才能計算出margin值，兼容所有瀏覽器。

方法2：絕對定位與margin:auto（已知高度寬度）

這種方式無需知道被垂直居中元素的高和寬，但不能兼容低版本的IE瀏覽器。

 #container {
 position: relative;
 height:100px;//必須有個高度
 }
 #center {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 margin: auto;//注意此處的寫法
 }

方法3：絕對定位+CSS3(未知元素的高寬)

利用Css3的transform，可以輕松的在未知元素的高寬的情況下實現元素的垂直居中。 CSS3的transform固然好用，但在項目的實際運用中必須考慮兼容問題，大量的hack代碼可能會導致得不償失。

 #container {
 position: relative;
 }
 #center {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 }

方法4：flex布局

利用flex布局，其中justify-content 用于設置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式；而align-items屬性定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。不能兼容低版本的IE瀏覽器。

 #container {//直接在父容器設置即可
 height: 100vh;//必須有高度
 display: flex;
 justify-content: center;
 align-items: center;
 }

方法5：flex/grid與margin:auto

容器元素設為 flex 布局或是grid布局，子元素只要寫 margin: auto 即可,不能兼容低版本的IE瀏覽器。

 #container {
 height: 100vh;//必須有高度
 display: grid;
 }
 #center {
 margin: auto;
 }

鏈接文章

https://segmentfault.com/a/1190000013966650

https://juejin.im/post/5bc3eb8bf265da0a8a6ad1ce

https://segmentfault.com/a/1190000015095402

、CSS 垂直居中

1、父元素display:table-cell;vertical-align:center，里面的子元素就會實現垂直居中，不需要知道子元素的寬高

/* HTML */
<div class='father'>
  <div class='son'></div>
</div>
<style>
  .father {
	display: table-cell;
	vertical-align: middle;
	width: 300px;
	height: 300px;
	border: 3px solid red;
  }
  .son {
	width: 50px;
	height: 50px;
	background-color: aqua;
  }
</style>
復制代碼

效果展示

2、absolute+margin:auto，定位為 absolute 的元素垂直居中，不需要知道該元素的寬高

<!-- HTMl -->
<div class="father">
	<div class="son"></div>
</div>
<style>
  .father {
	position: relative;
	width: 300px;
	height: 300px;
	border: 3px solid red;
  }
  .son {
	position: absolute;
	background-color: aqua;
	width: 50px;
	height: 50px;
	top: 0;
	bottom: 0;
	margin: auto;
  }
</style>
復制代碼

效果展示

3、absolute+負margin，定位為 absolute 的元素垂直居中，需要知道該元素的寬高

<!-- HTMl -->
<div class="father">
	<div class="son"></div>
</div>
<style>
  .father {
	position: relative;
	width: 300px;
	height: 300px;
	border: 3px solid red;
  }
  .son {
	position: absolute;
	width: 100px;
	height: 100px;
	background-color: aqua;
	top: 50%;
	/* 負margin須是高度的一半 */
	margin-top: -50px;
  }
</style>
復制代碼

效果展示

4、absolute+calc(css3計算屬性)，定位為 absolute 的元素垂直居中，需要知道該元素的寬高

<!-- HTMl -->
<div class="father">
	<div class="son"></div>
</div>
<style>
  .father {
	position: relative;
	width: 300px;
	height: 300px;
	border: 3px solid red;
  }
  .son {
	position: absolute;
	width: 100px;
	height: 100px;
	background-color: aqua;
	/* 注意"-"兩邊要隔開 減去的須是高度的一半*/
	top: calc(50% - 50px);
  }
</style>
復制代碼

效果展示

5、absolute+transform，定位為 absolute 的元素垂直居中，不需要知道元素的寬高

<!-- HTMl -->
<div class="father">
	<div class="son"></div>
</div>
<style>
  .father {
	position: relative;
	width: 300px;
	height: 300px;
	border: 3px solid red;
  }
  .son {
	position: absolute;
	width: 100px;
	height: 100px;
	background-color: aqua;
	top: 50%;
	transform: translateY(-50%);
  }
</style>
復制代碼

效果展示

6、line-height，父元素：line-height=height。子元素：display:inline-block。子元素垂直居中，不需要知道子元素的寬高

<!-- HTMl -->
<div class="father">
	<div class="son"></div>
</div>
<style>
  .father {
	width: 300px;
	height: 300px;
	border: 3px solid red;
	line-height: 300px;
  }
  .son {
	background-color: aqua;
	width: 100px;
	height: 100px;
	display: inline-block;
	vertical-align: middle;
  }
</style>
復制代碼

效果展示

7、flex，目前主流的布局方案，父元素為 flex 容器且添加 align-items: center，控制子元素的布局。不需要知道子元素的寬高

<!-- HTMl -->
<div class="father">
	<div class="son"></div>
</div>
<style>
  .father {
	width: 300px;
	height: 300px;
	border: 3px solid red;
	display: flex;
	align-items: center;
  }
  .son {
	background-color: aqua;
	width: 100px;
	height: 100px;
  }
</style>
復制代碼

效果展示

8、grid ，目前最強大的布局方案，使用還尚未流行。父元素為 grid，子元素添加 align-self: center。不需要知道子元素的寬高

<!-- HTMl -->
<div class="father">
	<div class="son"></div>
</div>
<style>
  .father {
	width: 300px;
	height: 300px;
	border: 3px solid red;
	display: grid;
  }
  .son {
	background-color: aqua;
	width: 100px;
	height: 100px;
	align-self: center;
  }
</style>
復制代碼

效果展示

9、偽元素after或before，這是我搜出來整理的。CSS 真的太神（s）奇（d）了，毫無道理。子元素垂直居中不需要知道寬高

<!-- HTMl -->
<div class="father">
	<div class="son"></div>
</div>
<style>
  .father {
	width: 300px;
	height: 300px;
	border: 3px solid red;
	display: block;
  }
  .father::after {
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 100%;
  }
  .son {
	background-color: aqua;
	width: 50px;
	height: 50px;
	display: inline-block;
	vertical-align: middle;
  }
</style>
復制代碼

效果展示

10、隱藏節點(盒子)實現該原理就是使用盒子占位置，但不顯示出該盒子。另外的盒子垂直居中，子盒子的寬高需由實際計算時確定

<!-- HTML -->
<div class="father">
	<div class="hide"></div>
	<div class="son"></div>
</div>
<style>
  .father {
	width: 300px;
	height: 300px;
	border: 3px solid red;
  }
  .son {
	background-color: aqua;
	width: 50%;
	height: 50%;
  }
  .hide {
	width: 50px;
	height: 25%;
 }
</style>
復制代碼

效果展示

11、writing-mode，這是搜索整理而來，參考資料見最后。子元素盒子 display: inline-block。子元素垂直居中，不需要知道該盒子的寬高

<!-- HTML -->
<div class="father">
	<div class="son"></div>
</div>
<style>
  .father {
	width: 300px;
	height: 300px;
	border: 3px solid red;
	writing-mode: vertical-lr;
	text-align: center;
  }
  .son {
	background-color: aqua;
	width: 100px;
	height: 100px;
	writing-mode: horizontal-tb;
	display: inline-block;
  }
</style>
復制代碼

效果展示

三、參考資料

作者：soloplayer
鏈接：https://juejin.cn/post/6904138129612439560
來源：掘金

SS中文字居中顯示的方式有以下五種：

使用text-align屬性設置文本的對齊方式

將text-align屬性值設置為center可以將文本居中顯示。

.center {
  text-align: center;
}

使用vertical-align屬性設置元素的垂直對齊方式

將vertical-align屬性值設置為middle可以將文本垂直居中顯示。

.center {
  vertical-align: middle;
}

使用line-height屬性設置行高

將line-height屬性值設置為比字體大小略大的值，可以使文本在容器中垂直居中顯示。

.center {
  line-height: 20px;
}

使用display

display: flex屬性將父元素設置為彈性布局，并使用align-items: center屬性將子元素在交叉軸上居中對齊。

.center {
  display: flex;
  align-items: center;
}

使用position

position: absolute屬性和transform: translateY(-50%)將子元素相對于其父元素垂直居中對齊。

// 父容器
.center {
  position: relative;
  height: 200px;
}

// 子容器
.center > div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  height: 100px;
  width: 200px;
  background-color: #ccc;
}

以上就是CSS中文字居中顯示的幾種方式，根據實際需求選擇合適的方式即可。

在線咨詢

上一篇：Go 開發者 Top 6 IDE：你知道幾個，又用哪
下一篇：電腦報原文它的真實身份其實是PC：路由器運行Aria

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商