DIV 文字 水平垂直居中  css写法

推荐优先使用 Flexbox 或 Grid 布局，它们更灵活且易于维护，能够适应各种内容和容器尺寸变化


1. 使用 Flexbox（推荐）
这是现代布局中最简洁的方式，兼容性良好：

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  width: 200px; /* 定义容器宽度 */
  height: 200px; /* 定义容器高度 */
  border: 1px solid #ccc;
}


2. 使用 Grid 布局
适合需要更复杂网格布局的场景：
.container {
  display: grid;
  place-items: center; /* 同时设置水平和垂直居中 */
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
}


3. 使用定位（Position）
适合需要兼容较旧浏览器的情况：
.container {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
}

.container p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 关键：通过位移调整中心点 */
  margin: 0; /* 清除默认外边距 */
}


4. 使用 line-height（仅适用于单行文本）
简单实用，但只限于单行文本：

.container {
  width: 200px;
  height: 200px;
  line-height: 200px; /* 与容器高度相同 */
  text-align: center; /* 水平居中 */
  border: 1px solid #ccc;
}