居中那些事情
本文作者：IMWeb moonye 原文出处：IMWeb社区 未经同意，禁止转载
居中那点事
最近碰到一些居中的问题需要处理，这里整理下碰到的问题以及一些解决的方案
文本水平居中
text-align:center;可以知道，让一个元素水平居中可以使内容是inline或inline-block 非文本场景下，其实padding也可以实现相同效果。这个可以根据内容自适应，不然这样一来外层容器宽度就不固定了。
文本垂直居中
文本垂直居中 单行的时候
line-height: 30px;
height: 30px;如果是多行，那么可以考虑这样子
padding: 30px 0;这样上下间距一样了，多行无压力
图片居中
这里分几个场景 1 容器比较大，且容器和图片是固定了宽高的，那么用上面的思路很容易解决，内联+line-height或内联+padding
//css
.wrap0 {
height: 300px;
width: 100%;
text-align: center;
}
.c0{
line-height: 300px;
display: inline-block;
}//dom
<div class="wrap0">
<div class="c0">我好</div>
</div>2 容器比较大，但容器和图片宽高是不固定的，那么图片需要如何做自适应处理呢 水平方向上，依然还是使用内联元素文本居中方式就可以实现。 垂直方向上，其实可以想想如果是文本是否还有其他垂直居中方式，vertical-align，让行内元素居中对齐。考虑到这个其实还是会有些问题，vertical-align是多个元素的对齐方式，那么或许可以考虑让另一个元素隐藏起来就好。
//css
.wrap1 {
height: 100%;
width: 100%;
position: fixed;
text-align: center;
}
.c1 {
height: 100px;
width: 100px;
background-color: gray;
display: inline-block;
vertical-align: middle;
}
.c2 {
height: 100%;
background-color: green;
display: inline-block;
vertical-align: middle;
width: 0;
}//dom
<div class="wrap1">
<div class="c1"></div>
<div class="c2"></div>
</div>3 容器比较小，而内容比较大，如何来做居中处理呢 首先来看看水平方向上如何处理 默认内容放置在容器中，内容和容器左边是对齐的，那么理论上是内层容器需要向左移动，才能实现对齐。现在的问题是需要移动多少呢
//考虑到方向
position = (width[容器] - width[内容])/2其实就是他们宽度之差的1/2，那么剩下的问题是怎么做到移动这么多？ 常见的跟位置相关的样式有top|left|right|bottom，margin，position，且left和margin是基于父元素的，那么如果内容设置了left为50%，那么其实width[容器]/2的值就出来了，而如果要实现width[内容]/2，只需要在内容外嵌套一个元素，这个元素和内容宽高一致，那么设置内容margin-left为50%，就可以实现了width[内容]/2，考虑到公式是负值的，所以margin-left应为50% 上面说的有些绕，可以直接看代码
.wrap1 {
height: 100px;
width: 200px;
margin: 0 auto;
text-align: center;
border: 1px solid red;
position: relative;
}
.wrap2 {
height: 100px;
width: 300px;
margin: 0 auto;
text-align: center;
border: 2px solid blue;
position: absolute;
left: 50%;
}
.c1 {
width: inherit;
height: inherit;
background-color: gray;
margin-left:-50%;
} <div class="wrap1">
<div class="wrap2">
<div class="c1"></div>
</div>
</div>这里留一个坑，如果c1元素是inline-block样式，会发生什么呢
同时，如果想在垂直方向上来实现这个效果，要这么做呢。 很容易想到上面那种做法，可以动手试下看看。 实际上是不行的，margin-top的值是基于父元素的宽度来计算的，而不是基于高度。所以。。。。 我们也可以通过一些特殊的方式去改变计算方式。比如让margin根据父元素的高度去计算 所以我们只需要在上面的wrap1样式中添加如下代码即可。
-webkit-writing-mode: vertical-rl; /* for browsers of webkit engine */
writing-mode: tb-rl; /* for ie */如果不采用这种样式，也可以使用js结合的方式去计算margin的值
多一点延伸的
其实提到按比例去计算位置，css3里面可以使用translate来配合使用，dom结构会更简洁，可悲的是万恶的ie8. 还是看看代码，先看看容器比内容大的场景：
.wrap1 {
width: 200px;
height: 300px;
margin: 300px auto;
position: relative;
border: 1px solid red;
}
.c1 {
width: 100px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
background-color: gray;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}<div class="wrap1">
<div class="c1"></div>
</div>上述代码在内容比容器大的时候照样适用