html结构
<div class="container"> <div class="item">垂直居中</div> </div>
css
<style> .container { width: 500px; height: 500px; border: 1px solid #000; position: relative; } </style>
在父容器中设置
.container{ displayy: flex; justify-content: center; align-items: center }
分为已知宽高和未知宽高两种情况
.item { width: 100px; height: 100px; border: 1px solid red; position: absolute; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; }
/*使用traansform*/ .item { border: 1px solid red; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) }
如对本文有疑问, 点击进行留言回复!!
web前端基础之HTML5语义化新标签学习笔记(8)学会用语义化标签
网友评论