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;
}

css 垂直居中常用的方法

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » css 垂直居中常用的方法

发表评论

提供最优质的资源集合

立即查看 了解详情