CSS DIV居中问题汇总附实例

CSS居中问题一直是大家比较关注的问题,在此前的CSS在线的文章中也曾多次提到过CSS居中的相关话题,今天对CSS居中问题做一个汇总。

CSS居中问题，根据居中对象划分主要包括：DIV居中,图片居中,以及文字居中。而根据居中方向划分为：水平居中和垂直居中。下面让我们来一一详述：

CSS 设置水平居中

A.如何设置CSS实现DIV的水平居中

CSS样式

div {margin-left: auto; margin-right: auto; }这句CSS居中的意思就是让div自己调整左右margin间隔的距离以达到水平居中的效果。
有时候我们还可以简写为 div { margin:0px auto; }但这样的简写法，如果你调整 margin-top 或者 margin-bottom 就会失去CSS居中的水平居中效果,所以最好还是按上一种写法比较好

代码实例：

[CSS中国]-示例代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>CSS中国-示例</title> <style type="text/css"> #divsample { margin-left: auto; margin-right: auto; background: red; width: 800px; height:600px; } </style> </head> <body> <div id="divsample">设置CSS样式实现DIV居中</div> </body> </html>

这种方式的缺点是：要设定容器的宽度，在比较旧的IE浏览器版本上显示不正常

B.设置TEXT-ALIGN属性实现居中

这种做法是hack，但是因为能兼容大多数浏览器，所以也经常被应用。之所以说它是hack，是因为这种方法并没有将文本属性应用到文本上，而是应用到了作为容器的元素上。这也给我们带来了额外的工作。

body{text-align:center}

因为如此设置会将父容器中所有的子元素的text-align属性全部默认为居中，因此不得不对其中需要居左或居右的元素添加text-align使得画面呈现我们需要的样子。

代码实例：

[CSS中国]-示例代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>CSS中国-示例</title> <style type="text/css"> body {text-align:center} #divsample { background: red; width: 800px; height:600px; } </style> </head> <body> <div id="divsample">这时DIV中的文字也居中了</div> </body> </html>

这种方式的缺点是：子元素的默认属性也变成了居中

C.组合使用自动外边距和文本对齐

为了弥补上面两种方式的缺点,组合使用自动外边距和文本对齐,即在设置了text-align的容器中再嵌套一个容器,将子容器的text-align恢复为正常,并设置子容器的自动外边距。但这仍然不算完美的解决办法

代码实例：

[CSS中国]-示例代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>CSS中国-示例</title> <style type="text/css"> body{text-align:center} #container{ margin-left:auto; margin-right:auto; background:red; width:800px; height:600px; text-align:left; } #samplediv { width:300px; height:200px; background:blue; } </style> </head> <body> <div id="container"> <div id="samplediv"> 文字和子容器仍默认居左显示 </div> </div> </body> </html>

D.负外边距解决方案

负外边距解决方案也是一种通过CSS实现元素居中的办法,但是远不是仅仅为元素添加负外边距这么简单，这种方法需要同时使用绝对定位和负外边距两种技巧。

下面是该方案的具体实现方法。首先，创建一个包含居中元素的容器，然后将其绝对定位于相对页面左边边缘50%的位置。这样，该容器的左外边距将从页面50%宽度的位置开始算起。

然后，将容器的左外边距值设置为负的容器宽度的一半。这样即可将该容器固定在页面水平方向的中点。

[CSS中国]-示例代码#container{ position:absolute; left:50%; width:800px; margin-left:-400px; }

代码实例:

[CSS中国]-示例代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>CSS中国-示例</title> <style type="text/css"> body{text-align:center} #container{ position:absolute; left:50%; width:800px; margin-left:-400px; background:red; text-align:left; } #samplediv { width:300px; height:200px; background:blue; } </style> </head> <body> <div id="container"> <div id="samplediv"> 文字和子容器仍默认居左显示 </div> </div> </body> </html>

本文由CSS中国整理

(责任编辑：admin)

我的网站

搜索

热门标签

CSS DIV居中问题汇总附实例