垂直居中的7种方法

拼搏现实的明天。 2022-08-05 13:23 190阅读 0赞

### 1、水平垂直居中 ###

div.center{
                        text-align:center;
                        background:hsl(0,100%,97%);
               }
               div.center span{
                        width:33%;
                        height:auto;
                }

但是这种方式没有让元素垂直居中，需要为div增加padding 或者为span元素设置margin-top和margin-bottom。

实现效果如下图：

![Center][]

### 2、利用margin:auto来实现居中 ###

<span style="white-space: pre;">		</span>div.center{
                        background:#ADFF2F;
                   }
                   div.center span{
                        width:33%;
                        height:auto;
                        margin:0 auto;
                        display:block;
                   }

为了使margin:0 auto产生效果，这里的display:block是必须的 。

实现效果如下图：

![Center 1][]

### 3、使用table-cell，实现水平和垂直居中 ###

<span style="white-space:pre">	</span>.center-aligned{
                        display:table;
                        background:#BCEE68;
                        width:100%;
                   }
                   .center-core{
                        display:table-cell;
                        text-align:center;
                        vertical-align:middle;
                   }

实现效果图如下：

![Center 2][]

为了阻止div collapse（我理解的搜索，即宽度为包裹的元素的宽度）,最外层的父元素必须设置width:100%

为了使内容垂直居中，外层的包裹元素也必须设置相应的高度。同样为了使元素在body中垂直居中，可以为body或html设置相应的高度。

如果为.center-core设置高度为100px,那么实现的结果图如下：

![Center 3][]

### 4、使用position:absolute 实现居中 ###

<span style="white-space:pre">	</span>.absolute-aligned{
                        position:relative;
                        min-height:300px;
                        background:#BCEE68;
                   }
                   .absolute-aligned span{
                        width:50%;
                        min-width:100px;
                        height:auto;
                        overflow:auto;
                        position:absolute;
                        margin:0 auto;
                        top:0;
                        bottom:0;
                        left:0;
                        right:0;
                        border:1px solid red;
                        text-align:center;//使元素内容水平居中
                   }

这种方式有一种限制就是：父元素中必须以一种方式设置height,否则实现的效果只是一条线。 最终实现的效果图如下：

![Center 4][]

### 5、利用translate实现居中 ###

<span style="white-space:pre">	</span><div class="center">
                   <span>水平垂直居中</span>
              </div>

<span style="white-space:pre">	</span>.center{
                        background:#BCEE68;
                        position:relative;
                        min-height:500px;
                   }
                   .center span{
                        position:absolute;
                        top:50%;
                        left:50%;
                        width:30%;
                        height:auto;
                        -webkit-transform:translate(-50%,-50%);
                        transform:translate(-50%,-50%);
                        border:1px solid red;
                        text-align:center;
                   }

这种方式的不足之处是：

IE8及更早的浏览器中不支持

父级容器需要显示的设置高度，因为无法从任何它的绝对定位的元素中获得高度。

如果内容包含文本，当前浏览器合成技术可能会使移动的文本变得的模糊。显示如下：

![Center 5][]

### 6.使用Flexbox centering ###

<span style="white-space:pre">	</span><div class="center">
                   <span>水平垂直居中</span>
              </div>

<span style="white-space:pre">	</span>.center{
                        background:#BCEE68;
                        display:flex;
                        justify-content:center;//元素在横轴的对齐方式
                        align-items:center;//元素在纵轴的对齐方式
                   }
                   .center span{
                        width:30%;
                        height:auto;
                        border:1px solid black;
                        text-align:center;
                   }

显示结果如下：

![Center 6][]

在很多方面，flexbox是最简单的方式，但是早期版本的IE并不支持，完整的css代码如下：

<span style="white-space:pre">	</span>.center{
                        background:#BCEE68;
                        display:-webkit-box;/*OLD: Safari, iOS 6 and earlier; Android browser, older WebKit*/
                        display:-moz-box;/*OLD: Firefox (can be buggy)*/
                        display:-ms-flexbox;/*OLD: IE 10*/
                        display:-webkit-flex;/*FINAL, PREFIXED, Chrome 21+*/
                        display:flex;/*FINAL: Opera 12.1+, Firefox 22+*/
                       
                        /*目前没有浏览器支持 box-align 属性,属性规定如何对齐框的子元素,指在垂直方向上如何对齐*/
                        -webkit-box-align:center;/*box-align 。Safari、Opera 以及 Chrome */
                        -moz-box-align:center;/*Firefox*/
                        -ms-flex-align:center;
                       
                        /*设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。*/
                        -webkit-align-items:center;
                        align-items:center;
    
                        /*box-pack 属性规定当框大于子元素的尺寸，在何处放置子元素
                        该属性规定水平框中的水平位置，以及垂直框中的垂直位置。
                        通过一起使用 box-align 和 box-pack 属性，对 div 框的子元素进行居中：*/
                        -webkit-box-pack:center;
                        -moz-box-pack:center;
                        -ms-flex-pack:center;
    
                        /*设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式*/
                        -webkit-justify-content:center;
                        justify-content:center;

### 7、使用calc实现居中 ###

<span style="white-space:pre">	</span>.cal{
                   background:#BCEE68;
                   min-height:600px;
                   position:relative;
              }
              .cal span{
                   border:1px solid black;
                   width:40%;
                   height:auto;
                   position:absolute;
                   top:-webkit-calc(50%-20%);
                   top:-moz-calc(50%-20%);
                   top:calc(50%-20%);
                  
                   left:-webkit-calc(50%-20%);
                   left:-moz-calc(50%-20%);
                   left:calc(50%-20%);
              }

如果直接设置left:50%;top:50%;那么span元素的z左上角将会位于父元素的中心，因为span元素的宽度为40%,所以为了使span元素的中心位于父元素的中心需要calc(50%-40%/2);

这种技巧比较适合具有固定尺寸的元素。IE8不兼容此属性。

### 8、使用伪元素使元素垂直居中（这个原理我还没有弄清楚） ###

<div class="wrap">
                   <div class="centered">
     <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>               </div>
     </div>

<span style="white-space:pre">	</span>html,body{
                   height:100%;
              }
              body{
                   min-width:500px;
                   background:#999;
                   font-size:100%;
                   border:1px solid red;
              }
              .wrap{
                   text-align:center;
                   height:100%;
              }
              .wrap:before{
                   content:'';
                   display:inline-block;
                   height:100%;
                   /*该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐 middle为把此元素放置在父元素的中部。*/
                   vertical-align:middle;
                   margin-right:-0.25em;
                   border:1px solid black;
              }
              .centered{
                   display:inline-block;
                   vertical-align:middle;
                   width:480px;
                   background:#eee;
                   text-align:left;
              }

运行结果显示如下：

![Center 7][]

原英文地址：http://demosthenes.info/blog/723/Seven-Ways-of-Centering-With-CSS

[Center]: /images/20220805/2127f6e322984e1b9b58dacfdb5e227c.png
[Center 1]: /images/20220805/d5786859dfa94d8da3979021aed6fc36.png
[Center 2]: /images/20220805/de051d80135e4d33a45b32b65f1a517c.png
[Center 3]: /images/20220805/acaf31b899114c51ac33692ba4cb5429.png
[Center 4]: /images/20220805/4c42daf5ad464ba8a3275c66496d14b0.png
[Center 5]: /images/20220805/a62c5a1317b24ccfb890d2f3b32f66e3.png
[Center 6]: /images/20220805/57ae518630594525aa475024b3fc8a68.png
[Center 7]: /images/20220805/949d83a486ca45d3b7aff5c01a571073.png