CSS 实现DIV水平垂直居中(一)

丶极致

已于 2023-02-22 15:01:04 修改

阅读量1.7k

点赞数 2

文章标签： css css3 html

于 2023-02-21 21:13:29 首次发布

本文链接：https://blog.csdn.net/qq_42758330/article/details/129150178

版权

文章目录

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垂直居中

丶极致

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS 实现DIV水平垂直居中(一)

以下介绍五种CSS实现DIV水平居中的方法，首先准备两个DIV，演示五种不同的方式实现DIV水平居中，代码仅对CSS部分做出修改，效果均如图所示。时，这个DIV两边分配得外边距相等，从而达到水平居中的效果。是相对d1的宽度来说的，所以d2会对齐d1的中线位置，因此要实现水平居中对齐还需要d2还需要向左移动自身的一半。来实现，但如果这个值并不是固定的，可能会发生变化的时候，我们可以使用CSS3中的。在我们不设置主轴的情况下，默认X轴为主轴，而且我们设置了这个主轴上面排列方式为。实现div水平居中。
复制链接

扫一扫