html中居中的代码格式

在HTML中，我们经常需要对页面中的元素进行居中处理。那么，在HTML中居中的代码该怎样写呢？

/* 居中元素 */
.center {
  margin: 0 auto;
  text-align: center;
}

/* 水平居中 */
.center-horizontal {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* 垂直居中 */
.center-vertical {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 水平垂直居中 */
.center-both {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

在代码中，我们定义了几个居中的样式类，分别实现了不同类型的居中效果。

其中，.center通过设置左右边距为auto以及文本居中方式实现块元素水平居中。.center-horizontal通过设置左右边距为auto以及display: block实现行内元素水平居中。.center-vertical通过设置display: flex以及align-items和justify-content为center实现垂直居中。

最后，.center-both通过设置position: absolute、top: 50%、left: 50%、以及translate(-50%,-50%)实现水平垂直居中效果。

以上就是HTML中居中的代码格式，通过应用不同的样式类，我们可以实现不同类型元素在页面中的居中效果。