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