三行css代码实现垂直居中_html/css_WEB-ITnose

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属性前添加浏览器前缀