居中是css里的一个大坑，基本上找不到万能的解决方法。虽然目前来讲弹性布局非常好用，但是兼容性还是一个大问题。所以这里就专门记录我遇到的居中问题和相对应的解决方法，方法不一定是最好的，但是确实有效。
div+span
项目中一个页面至少遇到两次这种坑，可见这个结构还是很重要的。这一结构常用来自定义标签栏，或者状态栏，如下：
这两个都是同一种结构，但是细节上还是有差别。
情况一
第一张图只需要文字居中即可，我的解决方案如下：
设置height=line-height，再添加text-align=center属性
100px;
height:100px;
line-height:100px;
text-align:center;
background:gray;
具体的原理虽然看过，但是记不清了，这里还不是很懂行高和元素高一致的作用。这里等大佬解释，或者以后系统性回顾的时候再解决。
情况二
情况二就比较麻烦了，因为左一控件“已选XX/XX”只是标签，而右边四个控件全是button。这五个控件在同一个父元素div下，button默认是垂直居中的，而状态标签默认是贴上的，而且默认不和button在同一行，再加上中间文字位置也乱七八糟，着实让人恶心。
最终解决方案如下，直接复制代码了：
#btn_select_bar div {
float: left;
margin: 5px 10px 0px 0px;
height: 40px;
100px;
border: 1px solid #a2e3f2;
border-radius: 5px;
}
#btn_select_bar div span {
text-align: center;
display: block;
position: relative;
top: 50%;
transform: translateY(-50%);
}
首先float浮动解决分层的问题，这是外框。下面是解决内部文字的问题，用上面的方法是行不通的，也是找了好久才解决这个。根据排除法，里面每一个属性都是必要的，但是我不是很懂display的作用。好吧，又一次Hacker，问题留待大佬解答，或者以后回顾解决。
div+div
这种也是很常见的吧。在我的项目中，遇到一个就是居中的卡片问题，如下：
首先卡片外框是水平居中的div，如果用其他方式很麻烦，这里用flex弹性布局justify-content: center就轻松搞定。麻烦的是内部文字需要垂直水平居中。
这里的解决方案如下：
设置父元素（即外框）为relative，子元素（即元素）为absolute，再给子元素添加以下css
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
以上真是一行代码都不能少。当然，要做到我上面那种效果还需要添加text-align: center。我个人勉强能懂top/left这些位移属性的作用，但还是不大懂设置两元素position的作用。
div+img
原本图片默认是百分比放缩，而外框会紧贴img，外框的大小随着图片大小而改变。但这里我们希望实现明确高度外框之下，图片居中的效果，如下：
红框内即为img所在区域。限制图片高度（默认百分比放缩）然后简单地设置margin是无效的，这里我的解决方案如下：
#card_img {
height: 100px;
display: flex;
}
#card_img img {
margin: auto;
height: 50%;
}
#card_img是外框的id。这里的核心思路就是通过flex来实现的。后来通过调试发现，不限制图片的高度也可以做到，只要确保外框flex添加就好了，只是缩小点更好看。弹性布局真是牛逼，希望各厂商尽快推动！！
持续更新...