6种使用CSS定位居中的方法

在页面上制作元素定位居中效果看起来十分简单，但是，在一些复杂的网页布局中，通常的居中方法往往不好使，这些情况让前端开发人员十分头疼。

在页面的水平方向是上使元素居中往往时比较容易的，要垂直居中则比较困难。在响应设计时代，我们很少能明确的知道元素的宽度和高度。根据我们的经验，CSS中至少有6种元素居中的方法，我们将从易到难往下讲解。我们使用下面的HTML代码作为DEMO的基本代码。

<div class="center">
    <img src="jimmy-choo-shoe.jpg" alt="">
</div>                                
                            

在每个DEMO中，鞋子的图片会有所不同，但是它们的大小都是500x500像素的。为保持一致的颜色主题，背景颜色都使用HSL颜色。

使用text-alignment使元素水平居中

有时候简单明了的方法往往是最佳的解决方法。

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

上面的代码不会使图片垂直居中，你需要为图片的包装div添加padding或为图片添加margin-top或margin-bottom才能使它垂直居中。

通过margin:auto来居中元素

这个方法主要是针对水平居中，需要垂直居中的话，要和text-alignment方法一样操作。

div.center { background: hsl(60, 100%, 97%); }
div.center img { 
    display: block; 
    width: 33%; 
    height: auto; 
    margin: 0 auto; 
}                                
                            

使用table-cell来居中元素

使用 display: table-cell，而不是实际的表格标签。它允许在水平和垂直两个方向上居中。使用这种方法通常需要添加和操纵一个外围包裹元素。这个元素可以是任何元素，一个div元素或body元素本身。

<div class="center-aligned">
    <div class="center-core">
        <img src="jimmy-choo-shoe.jpg">
    </div>
</div>                                
                            

CSS样式

.center-aligned { 
    display: table; 
    background: hsl(120, 100%, 97%); 
    width: 100%; 
}
.center-core { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
}
.center-core img { width: 33%; height: auto; }                               
                            

使用绝对定位来居中元素

在recently promoted by Stephen Shaw这篇文章中讲解了一种跨浏览器的绝对定位居中技术。但是它的一个缺点是，必须为外部容器声明某种形式的高度：

.absolute-aligned {
    position: relative; min-height: 500px;
    background: hsl(200, 100%, 97%);
}
.absolute-aligned img {
    width: 50%;
    min-width: 200px;
    height: auto;
    overflow: auto; margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}                                
                            

关于绝对定位居中的技术，你还可以参考这篇文章：Smashing Magazine article covering the technique。

使用translate来居中元素

使用CSS3 transforms同样可以使元素水平和垂直居中。

.center { 
    background: hsl(180, 100%, 97%); 
    position: relative; 
    min-height: 500px; 
}
.center img { 
    position: absolute; 
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%); 
    width: 30%; 
    height: auto; 
}                                
                            

这项技术有以下的缺点：

• CSS transform 使用时需要添加个浏览器厂商的前缀。
• IE8及之前的IE版本不支持 CSS transform。
• 外部容器需要设置一个高度（或从其它方法获取高度），同样它不能从绝对定位的元素获取高度。
• 如果内容中包含文本，当前浏览器的合成技术会在转换时使文本模糊。

使用Flexbox来居中元素

如果不使用任何变体属性和厂商前缀，这个方法可能是解决居中的最佳方案。

.center { 
    background: hsl(240, 100%, 97%); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}
.center img { width: 30%; height: auto; }                                
                            

flexbox也许是最简单的解决方法，但是由于一些旧语法和它缺乏对较早版本的IE浏览器的支持（可以使用display: table-cell 来解决IE问题），我们需要编写更多的代码，完整代码如下：

.center { 
    background: hsl(240, 100%, 97%);
    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+ */
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}                                
                            

通过calc来使元素居中

使用calc在某些情况下比flexbox更加灵活。

.center { 
    background: hsl(300, 100%, 97%); 
    min-height: 600px; 
    position: relative; 
}
.center img {
    width: 40%; 
    height: auto; 
    position: 
    absolute; 
    top: calc(50% - 20%); 
    left: calc(50% - 20%); 
}                                
                            

非常简单，calc允许你给予当前页面的布局做四则运算。在上面的计算中，50%是指包裹容器的一半位置。如果你只设置一个值50%的话，将设置图片的左上角的位置在<div>元素的中心位置。我们需要将图片的位置回移图片宽度和高度的一半，则需要像下面这样做（下面是一个长表达式）：

top: calc(50% - (40% / 2)); left: calc(50% - (40% / 2))                                
                            

在当前的浏览器中，这项技术在内容固定的布局中使用效果最好。因此要设置宽度、高度和位置：

.center img { 
    width: 500px; 
    height: 500px; 
    position: absolute; 
    top: calc(50% - (300px / 2)); 
    left: calc(50% - (300px – 2)); 
}                                
                            

calc技术也有一些潜在的缺点：Firefox 4以前的版本对它的支持不够好，对于这些浏览器需要厂商的前缀，还有IR8不支持calc。下面是使用calc使图片居中的完整代码：

.center img { 
    width: 40%; 
    height: auto; 
    position: absolute;
    top: -webkit-calc(50% - 20%); 
    left: -webkit-calc(50% - 20%);
    top: -moz-calc(50% - 20%); 
    left: -moz-calc(50% - 20%);
    top: calc(50% - 20%); 
    left: calc(50% - 20%); 
}                                
                            

关于更多calc的技术可以阅读：深入理解CSS CALC属性。

以上是6种CSS居中定位的方法，希望每一位前端开发者都能掌握它们。