元素居中的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属性的值和特性，了解属性以后，对问题进行分解，把特性和分解的问题进行一些联系，问题可以用那些特性实现，综合解决

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

最后编辑于：2017.12.10 01:46:39

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,098评论 5赞 476
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,213评论 2赞 380
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 149,960评论 0赞 336
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,519评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,512评论 5赞 364
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,533评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,914评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,574评论 0赞 256
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,804评论 1赞 296
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,563评论 2赞 319
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,644评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,350评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,933评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,908评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,146评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,847评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,361评论 2赞 342