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