水平，垂直居中

每天吃饭的羊2026-04-23 12:12

1. 水平对齐（左右居中）

给父元素写：

复制代码

text-align: center;     /* 水平居中 */
text-align: left;       /* 左对齐 */
text-align: right;      /* 右对齐 */

适用：

span、a、img、input、button 等行内 / 行内块元素

注意：text-align 是加在父元素上，不是直接加在行内元素自己身上。

2. 垂直对齐（上下对齐）

直接给行内元素本身写：

复制代码

vertical-align: middle;    /* 垂直居中 */
vertical-align: top;       /* 顶部对齐 */
vertical-align: bottom;    /* 底部对齐 */
vertical-align: baseline;  /* 基线对齐（默认） */

适用：

行内元素、行内块元素、图片、按钮、单行文字对齐

一、Flex 布局（现代项目首选）

复制代码

.parent {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
}
.son {
  width: 100px;
  height: 100px;
  background: #666;
}

优点：不依赖子元素宽高、代码简洁、响应式友好（IE10+）。

二、Grid 布局（最简洁）

复制代码

.parent {
  display: grid;
  place-items: center; /* 一行搞定水平+垂直 */
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
}
.son {
  width: 100px;
  height: 100px;
  background: #666;
}

优点：代码最少，二维布局能力强。

三、绝对定位 + transform（不定宽高通用）

复制代码

.parent {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
}
.son {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 回退自身宽高一半 */
  width: 100px;
  height: 100px;
  background: #666;
}

原理：top/left:50%让子元素左上角居中，transform再回退自身尺寸一半。

四、绝对定位 + margin:auto（固定宽高）

复制代码

.parent {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
}
.son {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto; /* 自动分配剩余空间 */
  width: 100px;
  height: 100px;
  background: #666;
}

限制：子元素必须固定宽高（IE8+）