当前位置:网站首页 > R语言数据分析 > 正文

grid布局垂直居中(display:grid布局)



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

 

水平且垂直居中方法

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

 

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

 

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

 

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

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

 

缺点:较难以理解,只适用于一个子级内联元素(有多个子元素不适用)

 

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

 

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

 

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

 

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

 

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

 

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

 

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

到此这篇grid布局垂直居中(display:grid布局)的文章就 介绍到这了,更多相关内容请继续浏览下面的相关 推荐文章,希望大家都能在编程的领域有一番成就!

版权声明


相关文章:

  • yml文件配置redis(yml配置文件路径)2025-03-16 15:18:09
  • kubelet起不来(kubelet.service failed)2025-03-16 15:18:09
  • impdp参数(impdp参数详解directory)2025-03-16 15:18:09
  • 查看docker版本信息的命令是(哪个命令可以查看docker版本)2025-03-16 15:18:09
  • redhat Linux系统支持的文件类型(linux支持的文件系统有)2025-03-16 15:18:09
  • grid布局垂直居中(gridlayout居中)2025-03-16 15:18:09
  • hprof文件怎么分析线程(分析hprof工具)2025-03-16 15:18:09
  • 连接redis不需要用户名么为什么(连接redis不需要用户名么为什么不可用)2025-03-16 15:18:09
  • spring入门教程(spring教程 csdn)2025-03-16 15:18:09
  • strategic的用法(strategy的用法及短语)2025-03-16 15:18:09
  • 全屏图片