css特效让元素垂直网页居中的办法

如何将一个未知高度的元素垂直居中,通常有两种常用的方法:

//html<div class="parent">
   <div class="child">center</div>
</div>

1、用绝对定位和translate

.parent{
   height: 300px;
   width: 300px;
   position: relative;
   background-color: bisque;}.child{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   padding: 30px;
   background-color: cornflowerblue;}

2、基于 Flexbox 的解决方案

这是毋庸置疑的最佳解决方案,因为 Flexbox是专门针对这类需求所设计的,只是一些老的浏览器版本兼容性可能不是很好,具体可以查看caniuse,现代浏览器一般没问题。

.parent{
   height: 300px;
   width: 300px;
   background-color: bisque;
   display: flex;
   justify-content: center;
   align-items: center;}.child{
   padding: 30px;
   background-color: cornflowerblue;}


免责声明

文章来源于网络,纯作记录存档用,如侵犯您的权益请联系删除!
转载本文请保留链接,谢谢!

评论