文章目录
CSS 实现DIV水平居中方法一方法二方法三方法四方法五CSS 实现DIV水平居中
以下介绍五种CSS实现DIV水平居中的方法，首先准备两个DIV，演示五种不同的方式实现DIV水平居中，代码仅对CSS部分做出修改，效果均如图所示。
初始代码:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title>Document</title><style>#d1 {width: 500px;height: 350px;background-color: blanchedalmond;}#d2 {width: 200px;height: 100px;background-color: aqua;}</style></head><body><div id="d1"><div id="d2"></div></div></body></html
效果图:
方法一
1.通过margin:aotu实现div水平居中。代码如下：
#d1 {width: 500px;height: 350px;background-color: blanchedalmond;}#d2 {width: 200px;height: 100px;background-color: aqua;margin: auto;}
我们知道margin会控制上下左右四个方向的外边距，因此这里我们将margin值设置为aotu时，这个DIV两边分配得外边距相等，从而达到水平居中的效果。那么这个值既然是应用在上下左右四个方向。那么这里为何没有同时垂直居中呢？是因为当我们margin值设置为aotu时，有一个例外，aotu只应用到水平方向。
方法二
2.通过position定位实现div水平居中。代码如下：
#d1 {width: 500px;height: 350px;background-color: blanchedalmond;position: relative;}#d2 {width: 200px;height: 100px;background-color: aqua;position: absolute;left: 50%;transform: translateX(-50%)}
d2中的left: 50%是相对d1的宽度来说的，所以d2会对齐d1的中线位置，因此要实现水平居中对齐还需要d2还需要向左移动自身的一半。可以通过计算使用margin-left: -100px来实现，但如果这个值并不是固定的，可能会发生变化的时候，我们可以使用CSS3中的transform: translateX(-50%)来实现水平居中。
方法三
3.通过display: inline-block改变div属性，代码如下:
#d1 {width: 500px;height: 350px;background-color: blanchedalmond;text-align: center;}#d2 {width: 200px;height: 100px;background-color: aqua;display: inline-block;}
我们知道div是一种不同于文本的块级元素，当我们使用display: inline-block改变了d2的属性，这时我们就可以在d1中使用text-align: center控制文本一样控制div水平居中了。
方法四
4.通过flex弹性布局实现div水平居中。代码如下；
#d1 {width: 500px;height: 350px;background-color: blanchedalmond;display: flex;justify-content: center; }#d2 {width: 200px;height: 100px;background-color: aqua;}
在我们不设置主轴的情况下，默认X轴为主轴，而且我们设置了这个主轴上面排列方式为cneter所以d2就会水平居中了。
方法五
5.通过grid栅格系统布局实现div水平居中。代码如下：
#d1 {width: 500px;height: 350px;background-color: blanchedalmond;display: grid;grid-template-rows: 100px 250px;grid-template-columns: 150px 200px 150px;}#d2 {background-color: aqua;grid-row: 1/2;grid-column: 2/3;}
使用grid栅格系统布局对于初学者比较复杂，因此通过grid栅格系统布局实现div水平居中暂不做过多介绍。下一期: CSS 实现DIV垂直居中
