设置div居中的方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了设置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 。文章来源地址https://www.toymoban.com/news/detail-552403.html

到了这里，关于设置div居中的方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！