CSS居中布局

一、水平居中

父元素和子元素的宽高均不定的情况下进行水平居中。

1、水平居中一——inline-block+text-align

text-align设置在父元素上，对具有inline属性的子元素是起作用的，子元素会继承text-align属性，所以如果想要子元素中的内容不受影响，要在子元素上重新设置text-align属性。

IE8及以上才支持inline-block，IE6、7只支持部分inline-block属性，IE6、7支持inline元素转换成inline-block，但不支持block元素转换成inline-block，所以非inline元素在IE6,7下要转换成inline-block，需先转换成inline，然后触发hasLayout，以此来获得和inline-block类似的效果。

全兼容的inline-block：

div {
      display: inline-block;
      *display: inline;
      *zoom: 1;
}

HTML

<div class="parent">
    <div class="child">DEMO</div>
</div>

CSS

.child{
    display:inline-block;
}
.parent{
    text-align:center;
}

2、水平居中二——table+margin

display为table的元素其实和display为block元素很像，但是它的宽度是由内容来决定的。

IE8及以上才支持table属性，兼容解决方案：把html结构换成table结构。

HTML

<div class="parent">
    <div class="child">DEMO</div>
</div>

CSS

.child{
    display:table;
    margin:0 auto;
}

3、水平居中三——absolute+transform

absolute元素默认宽度为内容宽度，脱离文档流（fixed元素也是）。

translate中的百分比指的是自身的宽度。

优点：

• absolute元素是脱离文档流的，不会对其它元素造成影响
• 只需要设置child的属性即可

IE9及以上才支持transform属性。
兼容方案：把transform改成margin-left为自身宽度的一半。

HTML

<div class="parent">
    <div class="child">DEMO</div>
</div>

CSS

.parent{
    position:relative;
}
.child{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
}

4、水平居中四——flex+justify-content

优点：只需要设置parent的属性即可。只有在文档流中的子元素才是flex-item，比如block、float、inline，absolute则不是。

缺点：IE10及以上才支持flex属性

HTML

<div class="parent">
    <div class="child">DEMO</div>
</div>

CSS

.parent{
    display:flex;
    justify-content:center;
}

或者

.parent{
    display:flex;
}
.child{
    margin:0 auto
}

补充：
行内元素水平居中可以直接用：text-align:center
块级元素水平居中可以直接用：margin-left：auto；margin-right：auto；

二、垂直居中

父元素和子元素的宽高均不定的情况下进行垂直居中。

1、垂直居中一——table-cell+vertical-align

vertical-align可以作用在inline、inline-block、table-cell等元素上。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

优点：兼容性好，table-cell支持IE8及以上。如果想要兼容IE6、7，要将html结构换成表结构。

HTML

<div class="parent">
    <div class="child">DEMO</div>
</div>

CSS

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

2、垂直居中二——absolute+transform

absolute元素默认也是没有宽度的，它的宽度是由内容来决定的。

translate中的百分比指的是自身的宽度。

优点：

• absolute元素是脱离文档流的，不会对其它元素造成影响
• 只需要设置child的属性即可

缺点：IE9以上才支持transform

兼容方案：把transform改成margin-left为自身对的一半

HTML

<div class="parent">
    <div class="child">DEMO</div>
</div>

CSS

.parent{
    position:relative;
}
.child{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}

3、垂直居中三——flex+align-items

优点：只需要设置parent的属性即可

缺点：IE10及以上才支持flex属性

HTML

<div class="parent">
    <div class="child">DEMO</div>
</div>

CSS

.parent{
    display:flex;
    align-items:center;
}

补充：
行内元素且只有一行垂直居中：将line-height设置成与父元素高度一样

三、水平垂直居中

父元素和子元素的宽高均不定的情况下进行水平垂直居中。

综合水平居中和垂直居中的方案来进行水平垂直居中。

1、水平垂直居中一——inline-block+text-align+table-cell+vertical-align

兼容性好：

• table-cell支持IE8及以上。如果想要兼容IE6、7，要将html结构换成表结构。
• IE8及以上才支持inline-block，IE6、7只支持部分inline-block属性

HTML

<div class="parent">
    <div class="child">DEMO</div>
</div>

CSS

.parent{
    text-align:center;
    display:table-cell;
    vertical-align:middle;
}
.child{
    display:inline-block;
}

2、水平垂直居中二——absolute+transform

兼容问题：IE9及以上才支持transform属性。

兼容方案：把transform改成margin-left为自身对的一半。

HTML

<div class="parent">
    <div class="child">DEMO</div>
</div>

CSS

.parent{
    position:relative;
}
.child{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}

3、水平垂直居中二——flex+justify-content+align-items

优点：只需要设置parent就可以
缺点：兼容性不好，只有IE10及以上才支持flex属性

HTML

<div class="parent">
    <div class="child">DEMO</div>
</div>

CSS

.parent{
    display:flex;
    justify-content:center;
    align-items:center;
}