[分享]css中如何居中方框

CSS中如何居中方框？居中方框可以让我们的网页看起来更加美观，下面我们将介绍几种实现方式。1. 使用 textalign 属性实现水平居中 .center { textalign: center; }...

CSS中如何居中方框？居中方框可以让我们的网页看起来更加美观，下面我们将介绍几种实现方式。

1. 使用 text-align 属性实现水平居中
.center {
  text-align: center;
} 

将要居中的方框包裹在一个类名为 "center" 的 div 元素内，设置 text-align 属性为 center 即可实现水平居中效果。

2. 使用 display 和 margin 属性实现水平居中
.center {
  display: flex;
  justify-content: center;
} 

使用 flex 布局，将要居中的方框包裹在一个类名为 "center" 的 div 元素内，设置 display 属性为 flex，justify-content 属性为 center 即可实现水平居中效果。

3. 使用 display 和 position 属性实现水平、垂直居中
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} 

使用绝对定位和 transform 属性，将要居中的方框包裹在一个类名为 "center" 的 div 元素内，设置 position 属性为 absolute，top 和 left 属性为 50%，transform 属性为 translate(-50%, -50%) 即可实现水平、垂直居中效果。

以上是常用的三种居中方框的方法，希望对您有所帮助。