关于CSS制做水平/垂直居中对齐问题

时间 2019-11-06

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

原文原文链接

做为前端开发者，在制做Web页面时都有碰到CSS制做水平垂直居中的问题，我想你们都有研究过或者写过，特别是其中的垂直居中，更是让人烦恼。这段时间，我收集了几种不一样的方式制做水平/垂直居中方法，我会将这几种方法分别介绍给你们，以供你们参考。或许对于像咱们这样的初学者来讲会有必定的帮助。css

1、水平居中：html

1.margin:0 auto前端

这种方法主要使用margin: 0 auto配合元素的width来实现水平居中的效果；使用该方法实现元素水平居中必定要让元素知足两个条件：其一，元素须要有一个固定宽度值；其二元素的margin-left和margin-right都必须设置为auto，这两个条件少了任何一个都没法让元素达到水平居中的效果。css3

 div{
    width:400px;
    margin:0 auto;
}

此方法使用水平居中，支持全部浏览器运行，是你们用得比较多，并且也是最经常使用、也是最凑效的方法。web

2.text-align:center浏览器

这种方法主要是针对单行文本居中或者table格式居中，主要运用的是text-align:center让元素水平居中；布局

body{text-align: center;

该方法text-align有三个属性值：left|center|right，分别对应向左对齐，居中对齐，向右对齐，比较经常使用，推荐。字体

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

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

4.position定位

对于定位也是经常使用的，在这里固然也能够采用定位的方法来实现水平居中：

body{
    position:absolute;
    left:50%;
}

采用定位居中虽然经常使用，在使用过程当中要计算偏移值，才能准确实现水平居中。

5.margin/padding

该方法对于div块中的水平居中对其，就是试着调：margin和padding，使用恰当合适的位置，会实现水平居中对其效果。

6.display:inline-block

有时使用display:inline-block来实现水平居中，也有效果哦，但要使用这个就得在其父元素上设置text-align.

 body{
    text-align:center;
}
.content{
    display:inline-block;
}

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;）；

.divr{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;    
 
      .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行高

该方法能实现垂直居中，但只能是单行文本居中（可适用于全部浏览器）：

.content{
   height:100px;
   line-height:100px; 
}

2.position定位

该方法跟水平居中同样，垂直居中也能够采用定位的方法，但它的缺点是当没有足够的空间时，元素会消失。

.content{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
}

或者是：

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

3.float浮动

固然咱们一样能够设置flaot浮动来达到垂直剧居中的效果，对于浮动，咱们须要在以后清除，并显示在中间。

.content{
    float:left;
     height:50%;
     margin-bottom:-120px;
}
.footer{
    clear:both;
    height:240px;
    position:relative;
}

4.vertical-align: middle

vertical-align属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。该方法能够随意改变元素高度，但在IE8中无效。

.content{
    display:table-cell;
    vertical-align:middle;
}

上面主要是收集了多种方法让元素实现垂直居中，你们能够在这几种方法上稍作改变就能实现其水平居中，这样就达到了元素水平垂直居中的效果。实现方法不少，你们能够根据须要选择不一样的方法。以上是我收集并总结的部分方法，仅供参考，但愿能给须要的朋友有所帮助。