• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

怎么让div垂直居中?

开发技术 开发技术 2周前 (06-11) 7次浏览
<div class="parent">
  <div class="child"></div>
</div>



<!-- 1 --> div.parent { display: flex; justify-content: center; align-items: center; } <!-- 2 --> div.parent { position: relative; } div.child { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } <!-- 3 --> div.parent { display: grid; } div.child { justify-self: center; align-self: center; } <!-- 4 --> div.parent { font-size: 0; text-align: center; &::before { content: ""; display: inline-block; width: 0; height: 100%; vertical-align: middle; } } div.child { display: inline-block; vertical-align: middle; }

 


程序员灯塔
转载请注明原文链接:怎么让div垂直居中?
喜欢 (0)