css居中style设置多个属性

在网页开发中，居中是经常用到的功能，而 CSS 具备设置元素居中的能力。下面将会介绍一些实现居中的常用属性以及如何将它们组合使用来实现多种居中效果。

1. 垂直和水平居中

.container{
      width: 300px;
      height: 300px;
      display: flex;
      justify-content: center;
      align-items: center;
}

上述代码中，通过在容器设置 display:flex，同时在其内设置 justify-content:center 和 align-items:center2 三个属性，就可以实现既垂直又水平居中。

2. 水平居中

.parent{
      display:flex;
}
.child{
      margin:auto;
}

这段代码中，由于 .parent 的 display 属性设置为 flex，.child 的 margin 属性设置为 auto，就可以实现水平居中效果。

3. 垂直居中

.container{
      position:relative;
}
.box{
      position:absolute;
      top:50%;
      transform:translateY(-50%);
}
    

这段 CSS 代码中，通过给容器设置 position:relative; ，之后在内部盒子设置了 position:absolute; 和 top:50%; 以及 transform:translateY(-50%); 三个属性，就可以实现垂直居中效果。

综上，以上是常用的几种 CSS 居中方式，通过不同的属性及组合方法，能很好地实现各种居中操作，总有一种适合你的需求。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！