html结构如下:
<div class="parent"> <div class="child"></div> </div>
不知道自己高度和父容器高度的情况下, 利用绝对定位只需要以下三行:
.parent { position:relative; } .child { position: absolute; top: 50%; transform: translateY(-50%); }
若父元素设置了高度,则只需要使用相对定位即可
.parent { height: xxx; } .child { position: relative; top: 50%; transform: translateY(-50%); }
不考虑兼容老式浏览器的话,使用flex布局:
.parent { display: flex; display: -webkit-flex; jusitify-content: center; align-items: center; }
本站部分文章搜集整理于互联网或者网友提供,如有侵权请联系站长
如若转载,请注明出处:https://www.htmlbk.com/web/998.html
温馨提示:该文档最后一次修改时间为2022-07-21 16:28:53,请注意相关的内容是否还可用!