css定位能用android,6种使用CSS定位居中的方法

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

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

在每个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;

}

注意：在这个方法中设置图片为 display: block 是必须的，这样图片才能应用 margin: 0 auto;。

使用table-cell来居中元素

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

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

注意：width: 100%是必须的，它能阻止div收缩。为了垂直居中外部容器需要设置一些高度。如果想在body中垂直居中，就需要设置body和html元素的高度。该技术可以在所有的浏览器中使用，包括IE8。

使用绝对定位来居中元素

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

}

使用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%的话，将设置图片的左上角的位置在

元素的中心位置。我们需要将图片的位置回移图片宽度和高度的一半，则需要像下面这样做(下面是一个长表达式)：

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居中定位的方法，希望每一位前端开发者都能掌握它们。