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

、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
來源：掘金

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

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

初始化

我們首先創建一個容器，其中包含一個簡單的div元素，我們將使用它來演示這些居中方法。下面是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>元素建立為網格容器，并為該容器生成塊級網格。我們已經將網格容器設置為寬（width: 100%）和高（min-height: 100vw），這樣我們的div就有足夠的空間在其中移動。

接下來讓我們來看看將div居中的各種方法。

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

place-self屬性提供了一種簡單的方法來水平和垂直居中網格項。它用于將網格項置于其網格單元格的中心。

將div居中就像這樣簡單：

article {
  display: grid;
}

div {
  place-self: center;
}

place-self屬性是justify-self（水平）和align-self（垂直）屬性的簡寫。

使用place-self對于在網格內居中單個項目特別有用，因為它使其他網格項目可以自由地以不同的方式定位。但這并不是使用Grid使元素居中的唯一方法，繼續看看其他的一些方法。

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

place-items屬性是justify-items（水平）和align-items（垂直）的簡寫。這些屬性應用于網格容器而不是每個網格項，當我們希望所有網格項具有相同的位置時，這些屬性非常有用。

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

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

我們可以基于初始代碼添加更多的div元素，看看會發生什么。結果是每個div將在其網格單元格內水平和垂直居中，如下圖所示（通過瀏覽器的網格檢查器）。

3.使用 place-content 居中Div

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

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

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

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

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

4.使用 CSS Grid 和 Auto Margins 居中

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

article {
  display: grid;
}

div {
  margin: auto;
}

5.使用 CSS Grid 網格區域居中div

最后一個方法我們將深入探討Grid布局的強大功能，因為我們將研究兩種方法來將div居中放置在具有多行和多列的網格中。

以下是我們的基本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;
}

我們顯式地布局了一個網格，中間有一個區域來放置我們的div。我們現在甚至不需要在div上設置尺寸，因為網格軌跡會處理這個問題。我們在網格的中間指定一個網格單元格，其寬度為200px，高度為100px，然后我們告訴div從第二條網格線和第二條行線開始。(默認情況下，它將僅跨到每個方向上的下一條軸網線。）div元素被很好地放置在其容器的中心，如下所示。

下圖顯示了位于其網格軌跡內的div。

網格布局提供了各種不同的方法來實現這一結果。最后我們做與上面相同的事情，但這次為我們的div使用一個命名區域：

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;
}

在這里，我們設置一個名為grid-area的box，然后描述它應該位于網格上的什么位置，用一個簡單的點（.）指定哪些網格單元格是空的。

這種布局方法的優點是，它可以很容易地將許多其他元素放置在我們想要的任何地方，這就是網格布局的強大之處。

結論

這些方法中的每一個都允許我們在容器中水平和垂直地居中一個div。place-self和margin: auto選項很好，因為它們直接應用于居中的元素，而不是其容器。但是本文中介紹的所有方法都是高效的，并且可以很好地完成這項工作。在各種場景中，我們可能希望將元素置于中心，因此擁有一系列工具來實現該目標非常重要。

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

最后

有興趣的可以看看原文，可以在線體驗不同顏色格式是如何工作的。看完本文如果覺得有用，記得點個贊支持，收藏起來說不定哪天就用上啦～

專注前端開發，分享前端相關技術干貨，公眾號：南城大前端（ID: nanchengfe）

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

下面的居中示例中，統一使用了同一個div作為父元素和p作為子元素

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

css居中方式1

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

css居中方式2

這里利用了定位居中

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

css居中方式3

這里利用了彈性盒居中

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

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

css居中方式4

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

css居中方式5

利用動畫移動屬性transform

小編是一個有著5年工作經驗的架構師，關于web前端，自己有做材料的整合，一個完整學習web前端的路線，學習材料和工具。需要的伙伴可以私信我，發送“前端”等3秒后就可以獲取領取地址，免費送給大家。對于學習web前端有任何問題（學習方法，學習效率，如何就業）都可以問我。希望你也能憑自己的努力，成為下一個優秀的程序員！

結語

相信看了上面的有關Html5、css的元素五大居中方式，你們就可以解決自己的小問題了，但是也要養成一個總結的好習慣。好記性不如爛筆頭！以前留下來的話語總是有他的道理。Comeon！

在線咨詢

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

您的項目需求

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

整合營銷服務商