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


子元素在“父元素定位+自身绝对定位”的前提下，通过设定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 的操作。

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