三行css代码实现垂直居中

标签：

html结构为：

<div id=‘div2‘>
	<div id=‘div1‘></div>
</div>

css代码为：

#div2{
	height:300px;width:300px;
	border:1px red solid;
	text-align:center;
	margin:auto;
}
#div1{
      height:50px;width:50px;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      border:1px red solid;
      margin:auto;
}

其中最核心的css是这三行

      position: relative;
      top: 50%;
      transform: translateY(-50%);

为了浏览器兼容性，需要在transform属性前添加浏览器前缀

三行css代码实现垂直居中

标签：

原文地址：http://my.oschina.net/codespring/blog/489265