元素居中的N种方式

水平居中

<1>行内元素的居中

被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。

text-align

<title>行内元素水平居中</title>
<style>
div{
    border:1px solid red;
    margin:20px;
}
.txtCenter{text-align:center;}
.imgCenter{text-align:center;}
</style>
</head>
<body>
<div class="txtCenter">我想要在父容器中水平居中显示。</div>
<div class="imgCenter">![](http://upload-images.jianshu.io/upload_images/5983146-dec4b8fafded5d82.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</div>
</body>

<2>块状元素的居中

当被设置元素为块状元素时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。

`定宽块状元素`

margin: value auto;

<title>定宽块状元素水平居中</title>
<style>
    div{
        border:1px solid red;
        width:200px;
        margin:20px auto;
    }
</style>
<body>
    <div>我是定宽块状元素，我要水平居中显示。</div>
</body>

`不定宽块状元素`

table + margin

table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。

优点：只需在子元素child上设置css样式，不用关心父元素的
缺点：兼容性较差，如果需要兼容，更改html样式，改为table样式

<-- css -->
<style type="text/css">
    body{margin:20px;}
    .parent{background: red;}
    .child{
        display: table;
        margin: 0 auto;
        background: blue;
        opacity: .5;
    }
</style>
<-- html -->
<div class="parent">
    <div class="child">DEMO</div>
</div>

inline-block + text-align

初始DEMO是块级元素，会充满父元素；inline-block默认宽度为内容宽度,然后给父元素设置text-align

优点：兼容性较好，甚至可以兼容IE6
缺点：子元素会继承父元素的text-align，使子元素里的内容也水平居中

<style type="text/css">
    body{margin:20px;}
    .parent{
        background: red;
        text-align: center;
    }
    .child{
        display: inline-block;
        background: blue;
    }
</style>
<body>
<div class="parent">
    <div class="child">DEMO</div>
</div>
</body>

absolute + transform

利用绝对定位和偏移解决居中问题,left:50%; 将子元素距离左边50%，translateX是将自身宽度往左偏移50%；结果是水平居中

优点：因为position：absolute;脱离文档流，所以不会影响其他的子元素；
缺点：transform是css3的内容，所以兼容性较差；

<style type="text/css">
    body{margin:20px;}
    .parent{background:#ddd;}
    .child{background:#666;color:#fff;}
    .parent{height:1.5em;}
    .parent{
        position: relative;
    }
    .child{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
</style>
</head>
<body>
<div class="parent">
    <div class="child">DEMO</div>
</div>

float + relative

通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

<style>
.wrap{
    clear:both;
    float:left;
    position:relative;
    left:50%
    }
.wrap-center{
    background:#ccc;
    position:relative;
    left:-50%;
}
</style>
</head>
<body>
<div class="wrap">
    <div class="wrap-center">我们来学习一下这种方法。</div>
</div>

flex + justify-content

flex是弹性布局,有自己的居中属性,水平居中justify-content:center

优点：只需设置父元素，不用设置子元素
缺点：flex也是css3的，兼容性较差

<style type="text/css">
    body{margin:20px;}
    .parent{background:#ddd;}
    .child{background:#666;color:#fff;}
    .parent{
        display: flex;
        justify-content: center;
    }
    .child{
        margin: 0 auto;
    }
</style>
</head>
<body>
<div class="parent">
    <div class="child">DEMO</div>
</div>

垂直居中

<1>父元素高度确定的单行文本

通过设置父元素的height 和line-height高度一致来实现的。(height:该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的基线间的距离 )。

缺点:当文字内容的长度大于块的宽时，就有内容脱离了块。

<title>垂直居中</title>
<style>
.wrap h2{
    margin:0;
    height:100px;
    line-height:100px;
    background:#ccc;
}
</style>
</head>
<body>
<div class="wrap">
    <h2>hello world!</h2>
</div>
</body>

<2>父元素高度不确定的多行文本

table-cell + vertical-align

竖直居中的属性vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。
display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。我们都知道，单元格有一些比较特别的属性，例如元素的垂直居中对齐，关联伸缩等，所以可以设置垂直居中

优点:不用添加无意义的标签
缺点:兼容性有问题

<title>垂直居中</title>
<style type="text/css">
    body{margin:20px;}
    .parent{background:#ddd;}
    .child{background:#666;color:#fff;}
    .parent{width:4em;height:500px;}
    .child{width:100%;}
    .parent{
        display: table-cell;
        vertical-align: middle;
    }
</style>
</head>
<body>
<div class="parent">
    <div class="child">DEMO</div>
</div>

下面的代码直接在div外面机加一个table tbody tr td,又因为td标签默认情况下就默认设置了vertical-align 为 middle，所以我们不需要显式地设置了。

<style>
  .wrap{height:300px;background:#ccc}
</style>
</head>
<body>
<table><tbody><tr><td class="wrap">
<div>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>

<table><tbody><tr><td class="wrap">
<div>
    ![害羞的小女生](http://upload-images.jianshu.io/upload_images/5983146-1a12aeadf25d2b5f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
</div>
</td></tr></tbody></table>
</body>

absolute + transform

这个方法和水平居中的方法类似,唯一的区别是top:50%;,transform:translateY(-50%);

flex + align-items

与水平居中justify-content对应的属性align-items值为center,也可以实现垂直居中
设置display:flex;会使子元素充满父元素。因为align-items的值默认为stretch。

水平垂直居中

综合水平居中和垂直居中一起

inline-block + text-align +table-cell +vertical-align

<title>居中</title>
<style type="text/css">
    body{margin:20px;}
    .parent{width:200px;height:300px;}
    .parent{background:#ddd;}
    .child{background:#666;color:#fff;}
    .parent{
        text-align: center;
        display: table-cell;
        vertical-align: middle;
    }
    .child{
        display: inline-block;
    }
</style>
</head>
<body>
<div class="parent">
    <div class="child">DEMO</div>
</div>
</body>

absolute + transform

<title>居中</title>
<style type="text/css">
    body{margin:20px;}
    .parent{width:200px;height:300px;}
    .parent{background:#ddd;}
    .child{background:#666;color:#fff;}
    .parent{
        position: relative;
    }
    .child{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
</style>
</head>
<body>
<div class="parent">
    <div class="child">DEMO</div>
</div>

flex + justify-content + align-items

<title>居中</title>
<style type="text/css">
    body{margin:20px;}
    .parent{width:200px;height:300px;}
    .parent{background:#ddd;}
    .child{background:#666;color:#fff;}
    .parent{
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
</head>
<body>
<div class="parent">
    <div class="child">DEMO</div>
</div>
</body>

垂直居中的搭配有很多,我们可以根据实际情况做出一个判断,然后充分了解一些居中的属性以及属性值

总结：解决此类问题，我们需要了解css属性的值和特性，了解属性以后，对问题进行分解，把特性和分解的问题进行一些联系，问题可以用那些特性实现，综合解决

后面如果在遇到不同的居中方式,会补充在这里