CSS居中技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/boolean2011/article/details/7208130

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居中的水平居中效果,所以最好还是按上一种写法比较好

代码实例：

<!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使得画面呈现我们需要的样子。

代码实例：

<!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恢复为正常,并设置子容器的自动外边距。但这仍然不算完美的解决办法

代码实例：

<!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;
}
代码实例:

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

A.如何设置CSS实现DIV的垂直居中

设置DIV等容器元素的垂直举重可以通过在CSS中使用expression根据父容器的高度和宽度,来计算确定DIV的margin-left和margin-top位置，从而实现div的垂直居中

代码实例:

[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" media=screen>
body
{
text-align: center;
}
#a
{
width: 200px;
height: 400px;
background: red;
}
#b
{
margin-top: expression((a.clientHeight-50)/2);
width: 50px;
height: 50px;
background: blue;
}
</style>
</head>
<body>
<div id="a">
<div id="b"></div>
</div>
</body>
</html>

虽然这种办法能够实现div的垂直居中,但是仍然是不推荐使用,因为对浏览器资源要求比较高,另外expression只是在IE5.0后才支持。

B.如何设置CSS实现图片的垂直居中

对这个CSS居中问题,我们可以使用设置背景图片的方法,#samplediv{background: url("path") #FFF no-repeat center;}关键就在于这个Center属性，它表示让该背景图片在容器中居中。你也可以把Cener换成Top Left或者直接写上数字来调整它的位置。

代码实例:

<!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;
}
#samplediv
{
width:600px;
height:600px;
background: url("/UploadFile/200905/19/1554522229.jpg") red no-repeat center;
}
</style>
</head>
<body>
<div id="container">
<div id="samplediv">
</div>
</div>
</body>
</html>

C.如何设置CSS实现文字的垂直居中

文字的垂直居中可以用增高行距的办法实现垂直居中，示范代码如下：
[CSS在线]-示例代码#samplediv{ MARGIN-RIGHT: auto; MARGIN-LEFT: auto; height:200px; vertical-align:middle; line-height:200px; }
<div id="samplediv"><p>垂直居中的文字</p></div>
代码说明：
vertical-align:middle;表示行内垂直居中，我们将行距增加到和整个DIV一样高line-height:200px;然后插入文字，就垂直居中了。

代码实例:

<!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;
}
#samplediv
{
width:400px;
height:200px;
vertical-align:middle;
line-height:200px;
background:red;
}
</style>
</head>
<body>
<div id="container">
<div id="samplediv">
<p>垂直居中的文字</p>
</div>
</div>
</body>
</html>

CSS居中问题汇总附实例