html结构为:
1 | <div id= 'div2' > <div id= 'div1' ></div></div>
|
Copy after login
css代码为:
1 | #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;}
|
Copy after login
其中最核心的css是这三行
1 | position: relative; top: 50%; transform: translateY(-50%);
|
Copy after login
为了浏览器兼容性,需要在transform属性前添加浏览器前缀