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

时间 2019-11-07

标签关于 css 水平垂直居中问题栏目 CSS 繁體版

原文原文链接

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

1、横向居中：html

1.margin: 0 auto;css3

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

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

2.text-align:center;浏览器

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

body{text-align: center;}

可是当咱们在body设置text-align以后，body全部的子孙元素都会居中，因此咱们能够经过设置text-align：left让其中的文本回到默认的向左对齐布局

p{text-align: left;}

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

对于html4中已经淘汰的center标签，照样能够作到居中对齐，可是不建议使用；flex

<center></center>

4.position;spa

对于定位能够作到居中，我相信你们都知道，只是它不是很智能，要通过咱们简单计算，才能得出来偏移的位移值，好比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>

2、垂直居中：

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;}