css 布局(并排、水平居中、垂直水平居中)

/* 水平居中 */
.center-horizontal {
  display: flex;
  justify-content: center;
}
 
/* 垂直居中 */
.center-vertical {
  display: flex;
  align-items: center;
}
 
/* 水平垂直居中 */
.center-both {
  display: flex;
  justify-content: center;
  align-items: center;
}
 
/* 并排布局 */
.inline {
  display: inline-block;
}
 
/* 示例：并排水平居中布局 */
.container {
  text-align: center; /* 用于父元素中的文本对齐 */
}
.container .inline-center {
  display: inline-block;
  text-align: left; /* 重置文本对齐 */
}

这段代码定义了几个常用的CSS类，用于实现不同类型的布局效果。.center-horizontal、.center-vertical和.center-both用于实现水平、垂直和水平垂直居中。.inline类用于使元素并排显示。.container和.inline-center用于展示如何在并排布局中实现水平居中，同时内部元素通过text-align: left重置文本对齐。