div居中，css如何让div水平居中

编程之家2026-06-20988次浏览

其实div居中的问题并不复杂，但是又很多的朋友都不太了解css如何让div水平居中，因此呢，今天小编就来为大家分享div居中的一些知识，希望可以帮助到大家，下面我们一起来看看这个问题的分析吧！

在网页源码

的最上面加上<!DOCTYPE

html

PUBLIC

"-//W3C//DTD

XHTML

1.0

Transitional//EN"

在要居中的的DIV中添加

style="margin:0

auto;"

这样就能够让DIV居中.

如果你想要当中的图片在正中间显示.请给DIV指定宽度.否则DIV会被视为跟浏览器想同的宽度.

这样看起来还是没居中.楼上的TEXT-ALIGN:

center

只不过是让DIV当中的文本居中而已.不是DIV居中..记住一定要加上宽度

因为“text-align:center”控制的是文本居中，div居中可以用外边距margin来实现。

1、新建html文件，在body标签中添加div标签，div标签中的内容为“演示文本”，添加题目中的css样式，为了方便演示，给div标签添加灰色背景，这时可以发现div靠近浏览器的左侧，文字在div中居中：

2、为div标签添加新的外边距“margin”属性，属性值为“0 auto”，“0”指的是上下外边距为0，“auto”指的是左右外边距为自适应：

3、这时无论浏览器的宽度是多少，div都会在浏览器上水平居中：

1、在 DIV标签对中写入的正文标签的 HTML中<div></div>。

2、然后我们将 div设置为宽高度,我们需要注意的是,如果您不设置默认值的宽度为100%哦,所以它将填充整个页面。

3、然后我们设置 Div的边距,第一个参数指示顶部的距离为 0,第二个自动表示自动。也就是说,在设置此设置后, div将根据页面自动居中。

4、浏览效果好后,您可以看到此时 DIV块已自动居中,它与浏览器的左右两侧距离相同。

好了，文章到这里就结束啦，如果本次分享的div居中和css如何让div水平居中问题对您有所帮助，还望关注下本站哦！