这篇文章主要介绍了怎么用CSS将DIV居中的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇怎么用CSS将DIV居中文章都会有所收获，下面我们一起来看看吧。
为西充等地区用户提供了全套网页设计制作服务，及西充网站建设行业解决方案。主营业务为网站建设、成都网站设计、西充网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！
首先，我们先来看一下DIV居中的两种情况，一种是DIV在浏览器窗口内居中，另一种是DIV在它所在的容器中居中。
第一种情况，即DIV在浏览器窗口内居中。我们可以通过以下几种方法来实现。
方法一：使用绝对定位和margin
首先，我们将DIV设为绝对定位（position: absolute;），并将左、上、右、下四个方向都设为0，使其占满整个浏览器窗口。然后，我们再将margin属性设置为auto，就可以使DIV在水平和垂直方向上都居中了，如下所示：
div {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}方法二：使用flexbox布局
flexbox（弹性布局）是一种非常流行的布局方式，它可以很方便地实现垂直和水平方向上的居中，代码如下：
.container {
display: flex;
align-items: center;
justify-content: center;
}我们将DIV所在的容器设为flexbox布局（display: flex;），并设置align-items和justify-content属性都为center，就可以让DIV在垂直和水平方向上都居中了。
方法三：使用grid布局
grid布局是一种比flexbox布局更加强大的布局方式，它可以实现更加复杂的布局效果。在实现DIV居中方面，它可以这样写：
.container {
display: grid;
place-items: center;
}我们将DIV所在的容器设为grid布局（display: grid;），并将place-items属性设为center，就可以使DIV在垂直和水平方向上都居中了。
第二种情况，即DIV在它所在的容器中居中。我们可以采用以下几种方式实现。
方法一：使用text-align属性
如果DIV是行内元素，我们可以将它所在的容器的text-align属性设置为center，就可以使DIV在水平方向上居中了。代码如下：
.container {
text-align: center;
}
div {
display: inline-block;
}这里我们将DIV设为inline-block元素，以便能够对它设置width属性。然后，将DIV所在的容器的text-align属性设置为center，就可以使DIV在水平方向上居中了。
方法二：使用margin属性
如果DIV是块级元素，我们可以使用margin属性来实现居中。代码如下：
div {
width: 200px;
height: 200px;
margin: 0 auto;
}这里我们将DIV设为块级元素，并将其宽度设为200px，高度设为200px。然后，将DIV的左右margin都设为auto，就可以使DIV在水平方向上居中了。
方法三：使用flexbox布局
同样，我们可以使用flexbox布局来实现DIV在它所在容器中的居中。代码如下：
.container {
display: flex;
align-items: center;
justify-content: center;
}
div {
width: 200px;
height: 200px;
}我们将DIV所在的容器设为flexbox布局，并将align-items和justify-content属性都设为center，就可以使DIV在垂直和水平方向上都居中了。
关于“怎么用CSS将DIV居中”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“怎么用CSS将DIV居中”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注创新互联行业资讯频道。