CSS經典面試題-如何使用絕對定位來讓元素水平垂直居中

言

對于使用CSS屬性使得元素水平垂直居中問題，基本是在前端面試問題中必問的一個問題。由于這個問題的回答要分好幾種情況，我也會寫幾篇文章分別講述。

今天這篇文章我們首先看看，只有一個元素的時候采用絕對定位如何實現水平垂直居中的。

我已經將代碼放到github上，感興趣的同學可以去看看。

https://github.com/zhouxiongking/article-pages/blob/master/articles/position-center/position-absolute-center.html

CSS

場景

我們假定頁面只有一個div元素，目的是通過CSS屬性控制該div元素的水平垂直居中。

因為這篇文章講述的是絕對定位方法，因此要將div的position設置為absolute。為了讓div的水平垂直居中看起來更形象，我們添加border屬性。

通用屬性

接下來我們看看兩種實現方法吧。

方法1

在方法1中，我們首先需要使用margin: auto;在普通內容流中，margin: auto;相當于margin-top:0;margin-bottom:0。

其次因為div已經被設置為absolute，脫離文檔流，因此可以方便設置left，top，right，bottom四個值。

將left，top，right，bottom四個之都設置為0，瀏覽器會重新分配一個邊界框，這樣整個元素就會填充body所有可用空間。

為了讓元素能呈現水平垂直居中的狀態，必須給div元素設置高度和寬度，添加height和width屬性。

通過以上描述，我們可以得到以下的CSS屬性。

css屬性

通過在頁面上測試，我們可以得到以下的效果。而且不管瀏覽器窗口大小怎么變化，這個div元素始終是水平垂直居中的狀態。

方法1效果圖

方法2

方法2更好理解一些，首先給div設定高度和寬度。

由于position設置為absolute;給div設定left和top屬性都為50%

最后將div的margin-left和margin-top設置為寬度和高度的一半。

通過以上描述，得到以下的CSS代碼。

CSS代碼

通過在頁面上測試，我們可以得到以下效果圖。而且不管瀏覽器窗口大小怎么變化，這個div元素始終是水平垂直居中的狀態。

方法2效果圖

方法優點

上述兩種方法的CSS屬性都未曾使用CSS3特性，因此不用擔心兼容性問題。
兩種方法均只需要這一個類，就可實現在任何內容塊的水平垂直居中。
是否設置padding值對居中效果沒有影響

方法缺點

元素必須設置高度和寬度，不設置的話將不會有任何效果。
由于必須設置高度，相當于定高，因此為了防止內容邊界溢出，一般需要設置overflow屬性。

方法的優點很明顯，效果也很容易達到；但是方法缺點也是很明顯的，因為有很多元素都未必是定高和定寬的。總的來說還是應該看看實際應用場景。

結束語

今天這篇文章只是講解了，使用絕對定位讓元素水平垂直居中。后面會繼續講解其他元素水平垂直居中的情況，敬請期待吧。

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

在線咨詢

上一篇：鴻卓課工場—什么是HTML5?
下一篇：混搭模板：7個現代網站的免費HTML/CSS模板

您的項目需求

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

整合營銷服務商