关于CSS中的水平/垂直居中问题

最新推荐文章于 2025-08-08 11:09:55 发布

weixin_33948416

最新推荐文章于 2025-08-08 11:09:55 发布

阅读量107

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：https://my.oschina.net/FTChrist/blog/261340

本文总结了CSS中实现水平和垂直居中对齐的各种方法，包括使用margin、text-align、center标签、position、margin/padding、负外边距、css3弹性盒模型、fit-content和flex布局等。同时，详细解释了每种方法的原理及适用场景，旨在帮助开发者高效解决布局问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

关于css中的水平、垂直居中问题，我想大家也经常遇到过，而且这也是实用性比较高的用法，那么究竟有多少种方法呢？这边编者就做个小小的总结，有什么不足之处，还望大家多多指出。。。

一、横向居中：

1.margin: 0 auto;

这个是大家用得比较多，而且也是最常用、也是最凑效的方法，而且在大多数主流浏览器中，这种方法都非常有效，即使是Windows平台上的IE6，在其标准兼容模式(compliancemode)下也能够正常显示。（例如下面的类选择器[container]的居中,1和2是一样的效果）

/*1*/
.container{margin: 0 auto;}
/*2*/
.container{margin-left: auto;margin-right: auto;}

2.text-align:center;

该方法对于处理文本元素居中问题，相当hack，因为它能兼容大多数浏览器，而且设置到body元素上即可(text-align有三个属性值：left|center|right，分别对应向左对齐，居中对齐，向右对齐)

body{text-align: center;}

但是当我们在body设置text-align之后，body所有的子孙元素都会居中，所以我们可以通过设置text-align：left让其中的文本回到默认的向左对齐

p{text-align: left;}

3.<center></center>(不建议使用);

对于html4中已经淘汰的center标签，照样可以做到居中对齐，但是不建议使用；

<center></center>

4.position;

对于定位可以做到居中，我相信大家都知道，只是它不是很智能，要经过我们简单计算，才能得出来偏移的位移值，比如body的宽度是100%，一个div块的宽度是a，那么left的值就是（1-a)/2;

body{background: #000;position: relative;}
div{background-color:#cf9;position: absolute;width: 40%;height: 90px;left: 30%}

5.margin/padding;

对于某些小的div块中的居中问题，我们可以试着调margin和padding，这其实也算是一个小技巧，如果你运用的恰当，你会有意外发现的，相当好用，你值得尝试！！！

6.比较囧的方法（一个div块挤过去）;

呵呵呵，这个方法估计比较弱智，但是照样能够达到效果，邓爷爷不是说过么：“不管白猫黑猫，能抓到老鼠的就是好猫”，同样不管你东拼西凑，还是咋的，能达到预期的效果就ok!(例如div2吧div1挤过去)

div2{width: 30%;float: left;}
div1{width: 40%;float: left;}

7.css3提供的弹性盒模型;

弹性盒模型作为css3新引入的盒模型，能够轻松地创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局，对于它的实现原理大家可以通过下面的代码可以初步认识，要触发弹性盒模型适用 display: box， “box-orient”定义分布的坐标轴：vertical（垂直分布）和horizional（水平分布），默认情况下，盒子并不具有弹性，如果box-flex的属性值至少为1时，则变得富有弹性。如果盒子不具有弹性，它将尽可能的宽使其内容可见，且没有任何溢出，其大小由“width”和“height”来决定（或min-height、min-width、max-width、max-height）

<style type="text/css">
    body{
        display: box;
        box-orient: horizontal;
    }
    #box1 {
        box-flex: 2;
    }
    #box2 {
        box-flex: 1;
    }
    #box3 {
        box-flex: 1;
    }
</style>
<body>
    <div id="box1">1</div>
    <div id="box2">2</div>
    <div id="box3">3</div>
</body>

8.负外边距（margin-left：-(width/2)px）;

负外边距可以解决居中的问题，但是要用到绝对定位（position：absolute;），虽然该方法不是首选的方法，但也是一个不错的解决方案，而且适用性极广，那个做到大多数的浏览器的兼容问题

.container{backgrond-color: #000;position: absolute;left: 50%;width: 1000px;margin-left: -500px;}

9.css3中的fit-content;

fit-content是CSS3中给width属性新加的一个属性值，它配合margin可以让我们轻松的实现水平居中的效果

<style type="text/css">
    .page ul {  
          width: -moz-fit-content;width:-webkit-fit-content;width: fit-content;margin-left: auto;
          margin-right: auto;
    }
    .page li {  
          line-height: 25px;margin: 0 5px;float: left;
    }
    .page a {  
          display: block;color: #f2f2f2;text-shadow: 1px 0 0 #101011;padding: 0 10px;border-radius: 2px;
          box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
          background: linear-gradient(top,#434345,#2f3032);
    }
    .page a:hover {  
          text-decoration: none; box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
          background: linear-gradient(top,#f48b03,#c87100);
    }
</style>
<div class="page">
  <ul>
    <li><a href="#">Prev</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</div>

10.css3中的flex;

CSS3中的flex是一个很强大的功能，它能让我们的布局变得更加灵活与方便，而且它的实现相当便捷，扩展性强，唯一的缺点就是目前浏览器的兼容性较差。

<style type="text/css">
      .page {  
          display: -webkit-box;
          -webkit-box-orient: horizontal;-webkit-box-pack: center;display: -moz-box;
          -moz-box-orient: horizontal;-moz-box-pack: center; display: -o-box;-o-box-orient: horizontal;
          -o-box-pack: center;display: -ms-box;-ms-box-orient: horizontal;-ms-box-pack: center;
          display: box;box-orient: horizontal;box-pack: center;
    }
    .page li {  
          line-height: 25px;margin: 0 5px;float: left;
    }
    .page a {  
          display: block;color: #f2f2f2;text-shadow: 1px 0 0 #101011; padding: 0 10px;border-radius: 2px;
          box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;background: linear-gradient(top,#434345,#2f3032);
    }
    .page a:hover {  
          text-decoration: none;box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
          background: linear-gradient(top,#f48b03,#c87100);
    }	
</style>
<div class="page">
  <ul>
    <li><a href="#">Prev</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</div>

二、垂直居中：

1.line-height(行高);

对于垂直居中，line-height是大家最新熟悉的方法了，也是最方便、快捷的方法，同时又能做到很好的浏览器的兼容问题

<style type="text/css">
    .page{width: 100%;height: 100px;background: #000;line-height: 100px;}
</style>
<div class="page">
  <span>hello line-height!</span>
</div>

2.position(定位);

position对于我们来说，那是相当的好用，使用定位当然可以做到垂直居中

.div{position: absolute;top: 50%}

3.margin/padding;

我们可以设置margin-top/padding-top来达到垂直剧居中的效果，不要考虑div的高度

.div{width: 100px;height: 40%;background-color: red;margin-top:30%}

4.vertical-align: middle;

vertical-align属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值,这会使元素降低而不是升高,在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式

<div id="wrapper"> 
    <div id="cell"> 
        <div class="content"> 
          Content goes here
        </div> 
    </div> 
</div> 
#wrapper {display:table;} 
#cell {display:table-cell; vertical-align:middle;}

转载于:https://my.oschina.net/FTChrist/blog/261340