八、父元素令子元素全居中的办法

位置: 首页 > 马黑教程
[发布: 2023.3.2  作者: 水手  阅读: 178]
八、父元素令子元素全居中的办法


子元素在“父元素定位+自身绝对定位”的前提下,通过设定left或top值为“calc(50% - (自身宽或高除以2)px”可全居中,即绝对居中,就是水平和垂直方向都居中,但那是子元素的行为。父元素作为一家之主,也有能力令所有子元素绝对居中,较常用的方法有两个,都是基于 display 设定的。display 指显示方式,CSS将其作为一个属性,用于设置元素的显示形态,如不显示(none)、行内内联样式(inline)、行内块样式(inline-block)、块样式(block)等;还可用于设置元素的布局方式,如弹性布局(flex)和网格布局(grid),我们本节就是讲讲通过父元素的 flex 和 grid 布局令其下子元素绝对居中,以下两组代码的红色部分是实现子元素全居中的关键:


方法一:弹性布局(flex)


#papa {
        margin: auto;
        width: 1200px;
        height: 640px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
}


方法二:网格布局(grid)


#papa {
        margin: auto;
        width: 1200px;
        height: 640px;
        display: grid;
        place-items: center;
        position: relative;
}


网格布局(grid)和弹性布局(flex)令子元素绝对居中的设置都不复杂,都只需简单设置两三个属性的事情。而且,它们不依赖于自身的 position 设定,也不依赖于子元素的 position 配套设定,直接绝对居中,不过,帖子和帖子的子元素总要做位置偏移,还是建议给帖子所用到的元素采取配套的 position 定位方式,即“父 relative + 子 absolute”的方式。


子元素绝对居中的应用场景很多,比如做圆环环绕的效果,子元素绝对居中之后通过 transform 的 rotateY + translateX 能够快速实现,无需考虑  transform-origin 圆点设置。即便用不上,设置了子元素绝对居中也不会妨碍给元素设置 left 和 top 的操作。

前一篇: 七、弄清元素间的父子层级关系
下一篇: 九、文本设置常用方法与技巧

发表评论:

  
 

评论列表 [0条]

Copyright © 2014 All Right Reserved 马黑PHP文章管理整站系统v1.8
联系我们: gxblk@163.com