前端常见居中问题总结

居中是css里的一个大坑，基本上找不到万能的解决方法。虽然目前来讲弹性布局非常好用，但是兼容性还是一个大问题。所以这里就专门记录我遇到的居中问题和相对应的解决方法，方法不一定是最好的，但是确实有效。

div+span

项目中一个页面至少遇到两次这种坑，可见这个结构还是很重要的。这一结构常用来自定义标签栏，或者状态栏，如下：

这两个都是同一种结构，但是细节上还是有差别。

情况一

第一张图只需要文字居中即可，我的解决方案如下：

设置height=line-height，再添加text-align=center属性

width: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;
    width: 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添加就好了，只是缩小点更好看。弹性布局真是牛逼，希望各厂商尽快推动！！

持续更新…