水平且垂直居中方法有哪些?这在实际工作中经常用到,小记一下。
一般的,水平居中相对垂直居中简单很多,对于内联元素(、、和),父级元素设置;对于块级元素,子级元素设置。以下结合水平居中强调实现垂直居中。
注:需要已知父级元素固定宽高,才能确定 和 。
注:需要已知父级元素的固定高度,才可以确定。
注:无需要确定父级元素的宽高, 、 不兼容ie67
看到还有一种方案,是借助伪元素 将容器撑高,实现内联元素垂直居中
缺点:较难以理解,只适用于一个子级内联元素(有多个子元素不适用)
注:无需要确定父级元素的宽高,不兼容ie67
注:无需要确定父级元素的宽高,属性兼容IE9+
注:无需要确定父级元素的宽高,但HTML标签层数较多。
注:无需要确定父级元素的宽高,但把定位属性全用上了
注:无需要确定父级元素的宽高,兼容IE10+
注:无需要确定父级元素的宽高,兼容性Firefox 52, Safari 10.1, Chrome 57, Opera 44
注:此方法最简洁, 但是 flex/grid 存在兼容性问题
到此这篇grid布局垂直居中(display:grid布局)的文章就 介绍到这了,更多相关内容请继续浏览下面的相关 推荐文章,希望大家都能在编程的领域有一番成就!版权声明:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符,请将相关资料发送至xkadmin@xkablog.com进行投诉反馈,一经查实,立即处理!
转载请注明出处,原文链接:https://www.xkablog.com/rfx/83088.html