【面试问题】关于水平居中和垂直居中

最新推荐文章于 2021-09-12 17:22:20 发布

原创最新推荐文章于 2021-09-12 17:22:20 发布 · 687 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了多种使用CSS实现元素居中的方法，包括水平和垂直居中，适用于不同浏览器环境及特定场景需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个问题很常见，记录下来将来好在面试之前复习复习！！

1、margin:0 auto

0是随意的一个值，第二个值必须设为auto，此方法只能水平居中，对浮动元素和绝对定位元素无效！只对块状元素有效。

2、text-align:center

只能对图片、按钮、文字等行内元素（display为inline或inline-block）水平居中。此属性是相对于父元素来说的。

3、line-height

把该属性的值设置为文字父容器的高度，实现垂直居中。只适用于只有一行文字的情况。对块状和行内元素都使用。

4、使用表格：适用IE8以上和火狐等现代浏览器，不适用于IE6、7.

把需要居中的元素放在<td>标签中，表格默认对里面的内容进行垂直居中，所以只要设置td的属性align为center就可以实现水平居中（千万注意，这里的align是td的属性，不是CSS属性，千万注意！！！），或者在CSS中设置text-align:center也行。

<body>
	<table>
	<tr><td align=center>
		<i>把该属性的值设置为文字父容器的高度，实现垂直居中</i>
	</td></tr>
	</table>	
</body>

5、display:table-cell：适用IE8以上和火狐等现代浏览器，不适用于IE6、7.

display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签。可以通过设置css属性text-align:center来水平居中、vertical-align:middle来垂直居中，这种方法只能在IE8+、谷歌、火狐等浏览器上使用。（vertical-align实现居中的性质非常混乱，记住这一种）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JuZhong</title>
	<style>
	div{
		border:1px solid red;
		width:500px;
		height:500px;
		display:table-cell;
		vertical-align:middle;
		text-align:center;		
	}
	
	i{
		font-weight:bold;
		border:1px solid yellow;
	}
	</style>
</head>
<body>
	<div>
		<i>把该属性的值设置为文字父容器的高度，实现垂直居中</i>
	</div>	
</body>
</html>

6、使用绝对定位居中

父类：postion设置为relative，宽高已知；

子类：position设置为absolute,top和left相对于父类来移动的，此时的margin是相对于自己移动（听说position:、设置为absolute，margin相对于自己，真假求证啊）宽高已知；

接下来的一切就变得很好理解了。

top：50%（这个是父类高度的50%，以下类推）

left:50%

margin-top:自身高的负一半

margin-left:自身宽的负一半

7、适用于IE9+以上，火狐等浏览器

其他的条件和6相同，然后：

top:0

bottom:0

left:0

right:0

margin:auto

听说是这样解释的：top和bottom是没有优先级的，所以他们都要求是0的时候，浏览器只好让他们居中，同理对left和right，不过margin:auto这句话是不可少的。

8、利用浮动和相对定位来实现水平居中（个人觉得此方法有点矫情，不推荐。）

条件：

需要给居中的元素加一个包裹元素；

需要居中的元素可以不设置宽度；

包裹元素进行浮动，并且设置为相对定位，把left设置为：50%（父类宽度的50%）；

需要居中的元素设置为相对定位，把left设置为：-50%（父类也就是包裹元素宽度的50%，包裹元素和需要居中的元素没有设置宽度，所以他们宽度相等）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JuZhong</title>
	<style>
	.parent{
		border:1px solid red;
		width:500px;
		height:500px;	
	}
	.wraper{
		margin-top:20px;
		float:left;
		clear:both ;
		position:relative;
		left:50%;
		background-color:grey;
	}
	.child{
		border:1px solid blue;
		position:relative;
		left:-50%;		
	}
	</style>
</head>
<body>
	<div class="parent">
		<div class="wraper">
			<div class="child">水平居中</div>
		</div>
		<div class="wraper">
			<div class="child">水平居中</div>
		</div>
	</div>	
</body>
</html>