设置div居中的方法

对于div居中，给出解决方案前，我们需要先说明几点：

• 说到“居中”，那肯定涉及到两种元素，即：容器div 和 待居中div
• 待居中div，是行级元素，还是块级元素（默认类型）
• 当待居中div 为 块级元素时，一般都会设置 width 和 height 的

一、行级 div 居中

给 div 设置 display: inline-block, 则 块级div 就成了 行内div。

方法1 ：text-align: center （ 水平居中 ）

• 设置元素：容器div
• 居中方向：水平居中

为 “容器div”添加下列样式属性即可：

<style>
.container-div {
  text-align: center;
}
</style>

二、块级 div 居中

方法1 ：margin: auto; （ 水平居中 ）

• 只需要对“待居中div”设置以上属性即可。
• 当只需要设置“水平居中”时，使用此方法最简单、简洁的。

方法2 ：flex布局 （ 水平垂直居中 ）

• 需要同时设置 “容器div” 和 “待居中div” 设置以上属性即可。
• 当只需要设置“水平垂直居中”时，使用此方法比较简单、简洁的。

为 “容器div”添加下列样式属性即可：

<style>
.flex {
  display:flex;
  /* 主轴上 居中 */
  justily-content: center;
  /* 交叉轴上 居中 */
  align-items: center;
}
</style>

方法3 ：flex布局 + margin （ 水平垂直居中 ）

• 设置元素： 容器div + 待居中div
• 可居中方向：水平 + 垂直

样式代码：

<style>
/* 容器div 样式 */
.content-div { display:flex; }

/* 待居中div 样式，下面只取一个*/
/* 水平+垂直 */
.test-div { margin: auto; }

/* 水平 */
.test-div-sp { margin: 0 auto; }

/* 垂直 */
.test-div-cz { margin: auto 0; }
</style>

方法4 ：绝对定位（position） + margin （ 水平垂直居中 ）

• 设置元素： 容器div + 待居中div
• 可居中方向：水平 + 垂直

样式代码：

<style>
/* 容器div 样式 */
.content-div {
  position:relative;
}

/* 待居中div 样式*/
/* 水平 + 垂直 */
.test-div {
	position:absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}

/* 水平 */
.test-div-sp {
	position:absolute;
	right: 0;
	left: 0;
	margin: 0 auto;
}

/* 垂直 */
.test-div-cz {
	position:absolute;
	top: 0;
	bottom: 0;
	margin: auto 0;
}
</style>

方法5 ：绝对定位（position） + transform:translate(-x, -y)（ 水平垂直居中 ）

• 设置元素： 容器div + 待居中div
• 可居中方向：水平 + 垂直

样式代码：

<style>
/* 容器div 样式 */
.content-div {
  position:relative;
}

/* 待居中div 样式*/
/* 水平 + 垂直 */
.test-div {
  position:absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%, -50%)
}

/* 水平 */
.test-div-sp {
  position:relative;
  left: 50%;
  transform:translate(-50%)
}

/* 垂直 */
.test-div-cz {
  position:absolute;
  top: 50%;
  transform:translate(0, -50%)
}
</style>

【代码思路】
1、容器div设置定位为 relative;
2、待居中div 设置定位的 absolute; 同时设置其与父元素的上，左边距都为 50%，再通过 transform 又向上移动了子元素的 height / 2，向左移动了子元素的 width / 2 。

方法6 ：绝对定位（position） + 负margin（ 水平垂直居中 ）

• 设置元素： 容器div + 待居中div
• 可居中方向：水平 + 垂直
• 使用此方法，必须要知道 待居中div 的宽/高，如 width = 200px, height = 100px

样式代码：

<style>
/* 容器div 样式 */
.content-div {
  position:relative;
}

/* 待居中div 样式*/
/* 水平 + 垂直 */
.test-div {
  position:absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}

/* 水平 */
.test-div-sp {
  position:relative;
  left: 50%;
  margin-left: -100px;
}

/* 垂直 */
.test-div-cz {
  position:absolute;
  top: 50%;
  margin-top: -50px;
}
</style>

【代码思路】
1、容器div设置定位为 relative;
2、待居中div 设置定位的 absolute; 同时设置其与父元素的上，左边距都为 50%，再通过 margin-top 的 负值 又向上移动了子元素的 height / 2，通过 margin-left 的 负值 向左移动了子元素的 width / 2 。