Notes.

CSS 实现垂直居中

2014-09-09 • ☕️ 1 min read

用 css 实现水平居中很容易，因为 css 有专门干这个的属性text-align:center; 虽然这个属性看似用来设置文本的居中，实际上，在应用样式body{ text-align:center }之后，整个body下的行内元素都会水平居中（块元素可以利用{margin:0 auto}实现水平居中）。但是要实现垂直居中就比较难办了。有两中思路来解决这个问题，一个是利用JavaScript动态获取父元素的高度，并设置相应的子元素的 margin 值来去的垂直居中的效果。另一种是利用纯css属性来实现垂直居中。用Javascript来实现垂直居中来得很自然，故重点介绍一下用css方法来实现垂直居中的解决方案。

利用 table 来实现

在表格的子元素table-cell里有一个vertical-align的属性，按照 MDN 上的解释，我们可以知道同时用来设置行内元素（inline）和表格元素（table-cell）的垂直对齐方式的。利用这一点，我们可以将需要垂直居中的元素显示的指定显示方式为table-cell (inline仅支持行内元素，不支持块元素，故不选inline)。比如：

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Test</title>
<style>
	#container{
		width:200px;
		height: 300px;
		display: table;
		border:1px solid red;
	}
	#box{
		height: 20px;
		width: 20px;		
		display: table-cell;
		vertical-align: middle;
	}
	#innerbox{
		width: 20px;
		height: 20px;
		background: blue;
	}
</style>
</head>
<body >
<div id = "container">
	<div id="box">
		<div id = "innerbox">			
		</div>
	</div>
</div>

</body>
</html>

效果如下：

使用{top:50%;position:relative}来实现垂直居中

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Test</title>

<style>
	#container{
		width:200px;
		height: 300px;
		background: red;
	}

	#box{

		height: 10px;
		width: 10px;
		position:relative;
		top:50%;
		background: blue;

	}
</style>
</head>
<body >

<div id = "container">
	<div id="box">		
		</div>
	</div>
</div>

</body>
</html>

效果如下：

Natumsol

Personal blog by Natumsol.
Note thoughts and experience.