css 居中问题

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

  代码实例：

复制代码
 1 [CSS在线]-示例代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 2 <html>
 3 <head>
 4 <title>CSS在线-示例</title>
 5 <style type="text/css">
 6 #divsample {
 7 margin-left: auto;
 8 margin-right: auto;
 9 background: red;
10 width: 800px;
11 height:600px;
12 }
13 </style>
14 </head>
15 <body>
16 <div id="divsample">设置CSS样式实现DIV居中</div>
17 </body>
18 </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恢复为正常,并设置子容器的自动外边距。但这仍然不算完美的解决办法

  代码实例：

复制代码
 1   [CSS在线]-示例代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 2 <html>
 3 <head>
 4 <title>CSS在线-示例</title>
 5 <style type="text/css">
 6 body{text-align:center}
 7 #container{
 8 margin-left:auto;
 9 margin-right:auto;
10 background:red;
11 width:800px;
12 height:600px;
13 text-align:left;
14 }
15 #samplediv
16 {
17 width:300px;
18 height:200px;
19 background:blue;
20 }
21 </style>
22 </head>
23 <body>
24 <div id="container">
25 <div id="samplediv">
26 文字和子容器仍默认居左显示
27 </div>
28 </div>
29 </body>
30 </html>
复制代码

D.负外边距解决方案

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

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

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

复制代码
 1 [CSS在线]-示例代码#container{
 2   position:absolute;
 3   left:50%;
 4   width:800px;
 5   margin-left:-400px;
 6 }
 7 代码实例:
 8 
 9 [CSS在线]-示例代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
10 <html>
11 <head>
12 <title>CSS在线-示例</title>
13 <style type="text/css">
14 body{text-align:center}
15 #container{
16 position:absolute;
17 left:50%;
18 width:800px;
19 margin-left:-400px;
20 background:red;
21 text-align:left;
22 }
23 #samplediv
24 {
25 width:300px;
26 height:200px;
27 background:blue;
28 }
29 </style>
30 </head>
31 <body>
32 <div id="container">
33 <div id="samplediv">
34 文字和子容器仍默认居左显示
35 </div>
36 </div>
37 </body>
38 </html>
复制代码


CSS 设置垂直居中

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

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

  代码实例:
复制代码
 1  [CSS在线]-示例代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 2 <html>
 3 <head>
 4 <title>CSS在线-示例</title>
 5 <style type="text/css" media=screen>
 6 body
 7 {
 8 text-align: center;
 9 }
10 #a
11 {
12 width: 200px;
13 height: 400px;
14 background: red;
15 }
16 #b
17 {
18 margin-top: expression((a.clientHeight-50)/2);
19 width: 50px;
20 height: 50px;
21 background: blue;
22 }
23 </style>
24 </head>
25 <body>
26 <div id="a">
27 <div id="b"></div>
28 </div>
29 </body>
30 </html>
复制代码

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

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

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

代码实例:

复制代码
 1 [CSS在线]-示例代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 2 <html>
 3 <head>
 4 <title>CSS在线-示例</title>
 5 <style type="text/css">
 6 body{text-align:center}
 7 #container{
 8 position:absolute;
 9 left:50%;
10 width:800px;
11 margin-left:-400px;
12 }
13 #samplediv
14 {
15 width:600px;
16 height:600px;
17 background: url("/UploadFile/200905/19/1554522229.jpg")  red no-repeat center;
18 }
19 </style>
20 </head>
21 <body>
22 <div id="container">
23 <div id="samplediv">
24 </div>
25 </div>
26 </body>
27 </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;然后插入文字，就垂直居中了。

代码实例:

复制代码
 1 [CSS在线]-示例代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 2 <html>
 3 <head>
 4 <title>CSS在线-示例</title>
 5 <style type="text/css">
 6 body{text-align:center}
 7 #container{
 8 position:absolute;
 9 left:50%;
10 width:800px;
11 margin-left:-400px;
12 }
13 #samplediv
14 {
15 width:400px;
16 height:200px;
17 vertical-align:middle;
18 line-height:200px;
19 background:red;
20 }
21 </style>
22 </head>
23 <body>
24 <div id="container">
25 <div id="samplediv">
26 <p>垂直居中的文字</p>
27 </div>
28 </div>
29 </body>
30 </html>
复制代码


 

本文来自CSS在线：http://www.csscss.org/cssarticle/2010125165.shtml

作者：【唐】三三

出处：https://www.cnblogs.com/tangge/archive/2011/02/16/1955785.html

版权：本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。

posted @   【唐】三三  阅读(1573)  评论(2)  编辑  收藏  举报
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
more_horiz
keyboard_arrow_up dark_mode palette
选择主题
点击右上角即可分享
微信分享提示
AI IDE Trae