文章目录
- 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垂直居中
