建站|CSS子盒子水平和垂直居中的五种方法

首先创建互相嵌套的两个盒子

浏览器中打开，盒子的样式为：

接下来是让子盒子水平和垂直居中的五种方法：

方法一：利用文本水平居中text-align: center和行高line-height进行实现

可以先通过display将子盒子转换为行内块显示模式，然后利用文本水平居中和行高获得最终子盒子的水平和垂直居中。由于对齐方式的不同，需要给子盒子添加vertical-align: middle;

方法二：利用子绝父相和外边距margin实现

先为父盒子设置相对定位，再为子盒子设置绝对定位，且绝对定位的四个方向的位移都设为0，然后将外边距margin属性值设置为auto即可。

方法三：利用子绝父相和左、上外边距实现

先为父盒子设置相对定位，再为子盒子设置绝对定位，且将子盒子分别向右、向下移动父盒子的一半，然后利用外边距margin将子盒子分别向左、向上移动子盒子的一半。

方法四：利用子绝父相和位移实现

先为父盒子设置相对定位，再为子盒子设置绝对定位，且将子盒子分别向右、向下移动父盒子的一半，然后利用位移transform: translate;将子盒子分别向左、向上移动子盒子的一半。

方法五：利用flex布局实现

首先在父元素中添加display:flex;使其显示模式为flex布局模式，然后在父元素中添加主轴居中和侧轴居中即可。 

最终结果显示为：

建站|CSS子盒子水平和垂直居中的五种方法都看到这里了，搬砖不易，给小编点个赞呗，以后我会更有动力分享哦~

赞0

打赏

重要声明
当前栏目内容除非特别标注，否则均来源于网络公开信息整理分享，本站不提供存储和下载服务，且无法保证第三方链接永久可靠。您若对本站或当前页面内容有疑问或者建议，欢迎联系我们反馈，我们将尽快与您互动，谢谢支持！