css水平垂直居中的方式有哪些

這篇文章主要講解了“css水平垂直居中的方式有哪些”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“css水平垂直居中的方式有哪些”吧！

如無特殊說明，以下示例html均為：

<div class="md-warp">
	<span class="md-main"></span>
</div>

基礎樣式為：

.md-warp{
	width: 400px;
	height: 300px;
	max-width: 100%;
	border: 1px solid #000;
}
.md-main{
	display: block;
	width: 100px;
	height: 100px;
	background: #f00;
}

水平居中

margin法

需要滿足三個條件:

• 元素定寬

• 元素為塊級元素或行內元素設置display:block

• 元素的margin-left和margin-right都必須設置為auto

三個條件缺一不可。

demo

.md-main{
	margin: 0 auto;
}

定位法

需要滿足三個條件：

• 元素定寬

• 元素絕對定位，并設置left:50%

• 元素負左邊距margin-left為寬度的一半

demo1

.md-warp{
	position: relative;
}
.md-main{
	position: absolute;
	left: 50%;
	margin-left: -50px;
}

有些時候我們的元素寬度可能不是固定的，不用擔心，我們依然可以使用定位法實現水平居中，此時需要用到css3中的transform屬性中的translate，可以使元素移動時相對于自身的寬度和高度。

需要注意，這種方法需要IE9+才可以實現。

demo2

.md-warp{
	position: relative;
}
// 注意此時md-main不設置width為100px
.md-main{
	position: absolute;
	left: 50%;
	-webkit-transform: translate(-50%,0);
	-ms-transform: translate(-50%,0);
	-o-transform: translate(-50%,0);
	transform: translate(-50%,0);
}

文字水平居中

對于單行文字來說，直接使用text-align: center即可。

多行文字可以看作一個塊級元素參考margin法和定位法。

垂直居中

定位法

和水平居中類似，只是把left:50%換成了top:50%，負邊距和transform屬性進行對應更改即可。

優點：能在各瀏覽器下工作，結構簡單明了，不需增加額外的標簽。

demo1

.md-warp{
	position: relative;
}
.md-main{
	position: absolute;
	/* 核心 */
	top: 50%;
	margin-top: -50px;
}

運用css3中的clac()屬性能簡化部分代碼：

.md-warp{
	position: relative;
}
.md-main{
	position: absolute;
	/* 核心 */
	top: calc(50% - 50px);
}

demo2

.md-warp{
	position: relative;
}
.md-main{
	position: absolute;
	top: 50%;
	// 注意此時md-main不設置height為100px
	-webkit-transform: translate(0,-50%);
	-ms-transform: translate(0,-50%);
	-o-transform: translate(0,-50%);
	transform: translate(0,-50%);
}

單行文本垂直居中

需要滿足兩個條件：

• 元素內容是單行，并且其高度是固定不變的。

• 將其line-height設置成和height的值一樣

<div><span>這是一段文字</span></div>
div{
	width: 400px;
	height: 300px;
	border: 1px solid #000;
}
span{
	line-height: 300px;
}

以上是一些常規辦法，接下來是利用CSS3新特性實現的示例。

視窗單位的解決辦法（垂直居中）

如果想避免使用絕對定位，我們仍然可以利用translate方法，其值剛好是元寬度和高度的一半。但是，我們如何不使用top和left將元素從top和left移動50%的偏移量呢？

首先想到的是給margin屬性一個百分數，像這樣：

.md-main{
	margin: 50% auto 0;
	transform: translateY(-50%);
}

效果如下所示：

我們發現并沒有出現預想的結果，這是因為margin的百分比計算是相對于父容器的width來計算的，甚至包括margin-top和margin-bottom。

我們如果仍然想讓元素在視窗中居中，還是有救的。CSS3定義了一種新的單位，稱為相對視窗長度單位。

以下摘自w3cplus

vw是相對于視窗的寬度。與你預期剛好相反,1vw相當于視窗寬度的1%，而不是100%

與vw相似的是，1vh相當于視窗高度的1%

如果視窗的寬度小于高度，1vmin等于1vw，反之，如果視窗寬度大于高度，1vmin等于1vh

如果視窗的寬度大于高度，1vmax等于1vw，反之，如果視窗寬度小于高度，1vmax等于1vh

在上個示例的基礎上，我們需要給margin設置vh單位:

.md-warp{
	position: relative;
}
.md-main{
	position: absolute;
	margin: 50vh auto 0;
	transform: translateY(-50%);
}

注意：這種方法最大的局限是只能適用于元素在視窗中垂直居中，如果是在局部的某個地方就無能為力了。

Flexbox的解決方案

如果不考慮瀏覽器的兼容性，Flexbox無疑是最好的解決方案，因為它的出現就是為了解決這樣的問題。

完成這項工作只需要兩個樣式，在需要水平垂直居中的父元素上設置display:flex和在水平垂直居中的元素上設置margin:auto。

.md-warp{
	display:flex;
}
.md-main{
	margin: auto;
}

Flexbox的實現文本的水平垂直居中同樣很簡單。

.md-warp{
	display:flex;
}
.md-main{
	display: flex;
  align-items: center;
  justify-content: center;
	margin: auto;
}

補充：

inline-block配合偽類的解決方案

.md-warp{
  font-size: 0;
}
.md-warp:before{
  content:'';
  display:inline-block;
  width: 0;
  height:100%;
  vertical-align:middle;
}
.md-main{
  display:inline-block;
  vertical-align:middle;
  font-size: 14px;
}

引自未知尺寸元素水平垂直居中實現詳解
首先要了解垂直方向的對齊排版需使用 vertical-align ，并且只應用于inline level, inline-block level 及 table-cells 元素上；其次 vertical-align 的對齊就基于每個 line box（行框） 的，簡單的說，inline level元素按照 Normal flow 水平排版出一行就會形成一個line box，其高度由內容形成，如果換行，則又是另一個line box，所有一段文本可能會分布在多個line box里，這些不重疊的line box被稱作為a vertical stack of line boxes（一個垂直堆疊的線框集合）這些。
換句話說，我們的垂直居中是要在每個line box中進行處理。而上例中我們想讓一行文本在名叫demo的高100px的容器里垂直居中，這時有個問題就是demo容器并非該行文本的line box，所以就算定義vertical-laign為middle也無法讓該行文本在demo容器中垂直居中。我們知道line box的高度是由內容形成的，這時我們可以額外創建一個與該行文本處于同一line box的元素，同時將新增元素的高度定義為與demo容器相同，此時line box的高度將與demo一致，文本將會在line box內垂直居中，即同樣實現了在demo容器中垂直居中。

絕對垂直居中

.md-warp{
  position: relative;
}
.md-main{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

常用在彈出層的定位中。

感謝各位的閱讀，以上就是“css水平垂直居中的方式有哪些”的內容了，經過本文的學習后，相信大家對css水平垂直居中的方式有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！