CSS中水平居中与垂直居中

      最近两周参与了一个web项目的开发，我负责前端的任务，在写代码过程中，我多次遇到了有关水平居中和垂直居中的问题。今天，我再次在W3C教程中找到了这张有关布局的图，毫不夸张地说，我花了一年时间，总算是彻底理解了这个布局，之前虽然能正常地使用position，但是还是一些理解有误的地方。尤其是绝对布局，每次使用时都心有余悸，担心出问题。

      

接下来具体说一下CSS中水平居中和垂直居中的问题。

首先，text-align和vertical-align是我们最常用的居中方式，但是两者都是针对行级元素（或者inline-block，但inline-block存在兼容性问题）的。

一.垂直居中

1.line-height

 当一个父div中嵌套了子元素，若想使得子元素（文本或图片）垂直居中，可在父div中设置line-height属性，让line-height的值等于父div的height值，则可实现子元素垂直居中，这是我认为的最简洁的方式。

HTML:

<div class="parent">
			<div class="child">
				垂直居中
			</div>
		</div>

CSS: