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小时内与您取得联系。

整合营销服务商