「CSS三種居中方案全解」CSS垂直居中常用方法集結(jié)

、CSS 垂直居中

1、父元素display:table-cell;vertical-align:center，里面的子元素就會(huì)實(shí)現(xiàn)垂直居中，不需要知道子元素的寬高

/* 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>
復(fù)制代碼

效果展示

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>
復(fù)制代碼

效果展示

3、absolute+負(fù)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%;
	/* 負(fù)margin須是高度的一半 */
	margin-top: -50px;
  }
</style>
復(fù)制代碼

效果展示

4、absolute+calc(css3計(jì)算屬性)，定位為 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>
復(fù)制代碼

效果展示

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>
復(fù)制代碼

效果展示

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>
復(fù)制代碼

效果展示

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>
復(fù)制代碼

效果展示

8、grid ，目前最強(qiáng)大的布局方案，使用還尚未流行。父元素為 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>
復(fù)制代碼

效果展示

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

<!-- 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>
復(fù)制代碼

效果展示

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

<!-- 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>
復(fù)制代碼

效果展示

11、writing-mode，這是搜索整理而來(lái)，參考資料見最后。子元素盒子 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>
復(fù)制代碼

效果展示

三、參考資料

作者：soloplayer
鏈接：https://juejin.cn/post/6904138129612439560
來(lái)源：掘金

文翻譯自 How to Center a Div Using CSS Grid，作者：Fimber Elemuwa, Ralph Mason。略有刪改

在本文中，我們將介紹使用CSS Grid在水平和垂直方向上居中div的五種方法，當(dāng)然這些技術(shù)可用于任何類型的元素。

初始化

我們首先創(chuàng)建一個(gè)容器，其中包含一個(gè)簡(jiǎn)單的div元素，我們將使用它來(lái)演示這些居中方法。下面是HTML：

<article>
  <div></div>
</article>

下面是我們的初始CSS：

article {
  width: 100%;
  min-height: 100vh;
  background: black;
  display: grid;
}

div {
  width: 200px;
  background: yellow;
  height: 100px;
}

在下面所有的例子中，我們將使用display: grid屬性。這將<article>元素建立為網(wǎng)格容器，并為該容器生成塊級(jí)網(wǎng)格。我們已經(jīng)將網(wǎng)格容器設(shè)置為寬（width: 100%）和高（min-height: 100vw），這樣我們的div就有足夠的空間在其中移動(dòng)。

接下來(lái)讓我們來(lái)看看將div居中的各種方法。

1.使用 CSS Grid 和 place-self 將Div居中

place-self屬性提供了一種簡(jiǎn)單的方法來(lái)水平和垂直居中網(wǎng)格項(xiàng)。它用于將網(wǎng)格項(xiàng)置于其網(wǎng)格單元格的中心。

將div居中就像這樣簡(jiǎn)單：

article {
  display: grid;
}

div {
  place-self: center;
}

place-self屬性是justify-self（水平）和align-self（垂直）屬性的簡(jiǎn)寫。

使用place-self對(duì)于在網(wǎng)格內(nèi)居中單個(gè)項(xiàng)目特別有用，因?yàn)樗蛊渌W(wǎng)格項(xiàng)目可以自由地以不同的方式定位。但這并不是使用Grid使元素居中的唯一方法，繼續(xù)看看其他的一些方法。

2.使用 CSS Grid 和 place-items 居中Div

place-items屬性是justify-items（水平）和align-items（垂直）的簡(jiǎn)寫。這些屬性應(yīng)用于網(wǎng)格容器而不是每個(gè)網(wǎng)格項(xiàng)，當(dāng)我們希望所有網(wǎng)格項(xiàng)具有相同的位置時(shí)，這些屬性非常有用。

將以下CSS代碼添加到父容器：

article {
  display: grid;
  place-items: center;
}

我們可以基于初始代碼添加更多的div元素，看看會(huì)發(fā)生什么。結(jié)果是每個(gè)div將在其網(wǎng)格單元格內(nèi)水平和垂直居中，如下圖所示（通過(guò)瀏覽器的網(wǎng)格檢查器）。

3.使用 place-content 居中Div

place-content屬性是justify-content（水平）和align-content（垂直）的簡(jiǎn)寫。雖然place-self和place-items控制網(wǎng)格項(xiàng)如何放置在其指定的網(wǎng)格單元格中，但place-content指定網(wǎng)格容器的整個(gè)內(nèi)容應(yīng)如何對(duì)齊（即，所有網(wǎng)格項(xiàng)被視為一個(gè)組）。在我們的演示中，只有一個(gè)網(wǎng)格項(xiàng)（我們的單個(gè)黃色div），因此我們也可以使用place-content將其置于其容器的中心。

將以下CSS代碼添加到父容器：

article {
  display: grid;
  place-content: center;
}

這里有幾點(diǎn)需要注意。到目前為止，在所有的例子中我們都使用了center的值。但是到目前為止，我們已經(jīng)探索的每個(gè)屬性都有各種其他的放置物品的值。place-content有很多值，另外兩個(gè)值也可以用于居中我們的div：space-around和space-evenly。

此外，在我們的簡(jiǎn)單例子中，一個(gè)div在容器中居中，我們甚至可以混合和匹配我們上面看到的屬性。我們可以使用justify-content和align-items來(lái)居中div，有興趣的可以嘗試看看。

4.使用 CSS Grid 和 Auto Margins 居中

像往常一樣，我們將使用display: grid來(lái)定位父容器。我們還將使用margin: auto為div指定自動(dòng)邊距。這使瀏覽器自動(dòng)計(jì)算div周圍的可用空間，并在其網(wǎng)格單元格內(nèi)垂直和水平劃分，將div放置在中間：

article {
  display: grid;
}

div {
  margin: auto;
}

5.使用 CSS Grid 網(wǎng)格區(qū)域居中div

最后一個(gè)方法我們將深入探討Grid布局的強(qiáng)大功能，因?yàn)槲覀儗⒀芯績(jī)煞N方法來(lái)將div居中放置在具有多行和多列的網(wǎng)格中。

以下是我們的基本CSS：

article {
  display: grid;
  grid-template-columns: 1fr 200px 1fr;
  grid-template-rows: 1fr 100px 1fr;
}

div {
  background: yellow;
  grid-column: 2;
  grid-row: 2;
}

我們顯式地布局了一個(gè)網(wǎng)格，中間有一個(gè)區(qū)域來(lái)放置我們的div。我們現(xiàn)在甚至不需要在div上設(shè)置尺寸，因?yàn)榫W(wǎng)格軌跡會(huì)處理這個(gè)問(wèn)題。我們?cè)诰W(wǎng)格的中間指定一個(gè)網(wǎng)格單元格，其寬度為200px，高度為100px，然后我們告訴div從第二條網(wǎng)格線和第二條行線開始。(默認(rèn)情況下，它將僅跨到每個(gè)方向上的下一條軸網(wǎng)線。）div元素被很好地放置在其容器的中心，如下所示。

下圖顯示了位于其網(wǎng)格軌跡內(nèi)的div。

網(wǎng)格布局提供了各種不同的方法來(lái)實(shí)現(xiàn)這一結(jié)果。最后我們做與上面相同的事情，但這次為我們的div使用一個(gè)命名區(qū)域：

article {
  display: grid;
  grid-template-columns: 1fr 200px 1fr;
  grid-template-rows: 1fr 100px 1fr;
  grid-template-areas: ".  .  ."
                       ". box ."
                       ".  .  .";
}

div {
  background: yellow;
  grid-area: box;
}

在這里，我們?cè)O(shè)置一個(gè)名為grid-area的box，然后描述它應(yīng)該位于網(wǎng)格上的什么位置，用一個(gè)簡(jiǎn)單的點(diǎn)（.）指定哪些網(wǎng)格單元格是空的。

這種布局方法的優(yōu)點(diǎn)是，它可以很容易地將許多其他元素放置在我們想要的任何地方，這就是網(wǎng)格布局的強(qiáng)大之處。

結(jié)論

這些方法中的每一個(gè)都允許我們?cè)谌萜髦兴胶痛怪钡鼐又幸粋€(gè)div。place-self和margin: auto選項(xiàng)很好，因?yàn)樗鼈冎苯討?yīng)用于居中的元素，而不是其容器。但是本文中介紹的所有方法都是高效的，并且可以很好地完成這項(xiàng)工作。在各種場(chǎng)景中，我們可能希望將元素置于中心，因此擁有一系列工具來(lái)實(shí)現(xiàn)該目標(biāo)非常重要。

在演示示例中，我們只是使用了一個(gè)空的div，但是當(dāng)然我們可以向div添加內(nèi)容，居中仍然有效。而且這些居中技術(shù)同樣適用于div以外的元素。

最后

有興趣的可以看看原文，可以在線體驗(yàn)不同顏色格式是如何工作的。看完本文如果覺得有用，記得點(diǎn)個(gè)贊支持，收藏起來(lái)說(shuō)不定哪天就用上啦～

專注前端開發(fā)，分享前端相關(guān)技術(shù)干貨，公眾號(hào)：南城大前端（ID: nanchengfe）

習(xí)css大家是不是對(duì)元素居中的知識(shí)點(diǎn)很是模糊？是不是苦于找不到一個(gè)總結(jié)的通俗易懂的說(shuō)明？是不是自己懶得去總結(jié)？今天小編在前端的學(xué)習(xí)與實(shí)踐中總結(jié)出的元素的五大居中方式，黏貼了代碼并對(duì)代碼做了解釋，希望對(duì)迷茫的有所幫助！

下面的居中示例中，統(tǒng)一使用了同一個(gè)div作為父元素和p作為子元素

設(shè)置一個(gè)div,并且設(shè)置了div的寬高邊框，div里面設(shè)置一個(gè)塊元素p，設(shè)置了它的寬高和背景色

css居中方式1

這里利用了偽元素讓子元素p在div盒子里左右水平居中只需要在它的父元素div里加text-align:center;垂直方向居中需要在父元素后面加了一個(gè)偽元素，并使得樣式為inline-block;height:100%;就是和父元素一樣高，vertical-align:middle;垂直居中，也就是p元素相對(duì)與偽元素居中，由于偽元素和div一樣高，所以相當(dāng)于p元素在div里垂直居中。

css居中方式2

這里利用了定位居中

子元素p設(shè)置position：absolute脫離文檔流,默認(rèn)以html作為父元素，所以我們給父元素div設(shè)置position:relative;使得p以div為父元素做位置的變動(dòng)，left:0;tight:0;top:0;bottom:0;（只有設(shè)置了定位的元素才可以使用這種方式來(lái)移動(dòng)），最后margin:auto;就會(huì)水平和垂直都居中。

css居中方式3

這里利用了彈性盒居中

父元素div設(shè)置成彈性盒樣式，justify-content:center;主軸居中

align-items:center;垂直居中（而且這兩個(gè)只能設(shè)置在父元素上，彈性盒知識(shí)）

css居中方式4

利用定位線左上角居中，然后左移子元素寬度的一半，再上移子元素高度的一半。

css居中方式5

利用動(dòng)畫移動(dòng)屬性transform

小編是一個(gè)有著5年工作經(jīng)驗(yàn)的架構(gòu)師，關(guān)于web前端，自己有做材料的整合，一個(gè)完整學(xué)習(xí)web前端的路線，學(xué)習(xí)材料和工具。需要的伙伴可以私信我，發(fā)送“前端”等3秒后就可以獲取領(lǐng)取地址，免費(fèi)送給大家。對(duì)于學(xué)習(xí)web前端有任何問(wèn)題（學(xué)習(xí)方法，學(xué)習(xí)效率，如何就業(yè)）都可以問(wèn)我。希望你也能憑自己的努力，成為下一個(gè)優(yōu)秀的程序員！

結(jié)語(yǔ)

相信看了上面的有關(guān)Html5、css的元素五大居中方式，你們就可以解決自己的小問(wèn)題了，但是也要養(yǎng)成一個(gè)總結(jié)的好習(xí)慣。好記性不如爛筆頭！以前留下來(lái)的話語(yǔ)總是有他的道理。Comeon！

在線咨詢

上一篇：JavaScript 版本
下一篇：使用CSS隱藏頁(yè)面元素的幾種方法，你知道它們的具體區(qū)別嗎？

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商