grid布局垂直居中（display：grid布局）



水平且垂直居中方法有哪些？这在实际工作中经常用到，小记一下。

一般的，水平居中相对垂直居中简单很多，对于内联元素（、、和），父级元素设置；对于块级元素，子级元素设置。以下结合水平居中强调实现垂直居中。

注：需要已知父级元素固定宽高，才能确定 和 。

注：需要已知父级元素的固定高度，才可以确定。

注：无需要确定父级元素的宽高， 、 不兼容ie67

看到还有一种方案，是借助伪元素 将容器撑高，实现内联元素垂直居中

缺点：较难以理解，只适用于一个子级内联元素（有多个子元素不适用）

注：无需要确定父级元素的宽高，不兼容ie67

注：无需要确定父级元素的宽高，属性兼容IE9+

注：无需要确定父级元素的宽高，但HTML标签层数较多。

注：无需要确定父级元素的宽高，但把定位属性全用上了

注：无需要确定父级元素的宽高，兼容IE10+

注：无需要确定父级元素的宽高，兼容性Firefox 52, Safari 10.1, Chrome 57, Opera 44

注：此方法最简洁， 但是 flex/grid 存在兼容性问题

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/rfx/83088.html