水平居中

行内元素水平居中

<div class="container">
  <span>123</span>
</div>

.container {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  **text-align: center; /* 水平居中 */**
}
span {
  background-color: pink;
}

单个 div（块级元素）水平居中

<div class="container">
  <div></div>
</div>

.container {
  width: 200px;
  height: 100px;
  border: 1px solid black;
}
.container > div {
  width: 100px;
  height: 50px;
  background-color: pink;
  **margin: 0 auto; /* 水平居中 */**
}

多个 div 水平居中

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  gap: 10px; /* 可选：设置子元素之间的间距 */
}
.item {
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

⭐️ 水平垂直居中

已知宽高

<div class="container">
  <div class="center"></div>
</div>

绝对定位 + margin

.container {
  position: relative; /* 相对定位 */
  width: 200px;
  height: 100px;
  border: 1px solid black;
  text-align: center;
}

.center {
  **position: absolute; /* 绝对定位 */**
  **left: 0;
  top: 0;
  right: 0;
  bottom: 0;**
  width: 100px;
  height: 50px;
  **margin: auto; /* 0 auto 水平居中；auto 水平垂直居中 */**
  background-color: pink;
}

绝对定位 + 负 margin

.container {
  position: relative; /* 相对定位 */
  width: 200px;
  height: 100px;
  border: 1px solid black;
  text-align: center;
}
.center {
  **position: absolute; /* 绝对定位 */
  left: 50%;
  top: 50%;
  margin: -25px 0 0 -50px; /* 外边距为自身宽高的一半 */**
  width: 100px;
  height: 50px;
  background-color: pink;
}