概述
工作三个月，写了各种活动网页、小型CMS，也算是把自己的CSS基础补上来了。一开始遇到最多的问题莫过于居中问题了，这里就做下小小总结吧。
水平居中比较好处理，一般来讲通过text-align:center; 和margin: 0 auto; 都能解决，主要问题可能都集中在垂直居中上，以下是实战中总结的有效的居中方法。
行内元素（inline）
方法一、单行行内元素， 父元素设置line-hight和高度相等可以达到垂直居中
<div class="parent">
<div class="child">
This is a inline element! //为了撑起child高度
</div>
</div>
.parent{
width: 400px;
height: 350px;
line-height: 350px;
text-align: center;
border: 1px solid black;
}
.child{
width: 150px;
display: inline;
border: 1px solid black;
}
效果如下：
该方法对于单行行内元素，简单有效！
方法二、多行垂直居中 父元素设置line-height等于hight，子元素设置display:inline-block;vartical-align:middle以及line-height:1.5;覆盖父级元素line-hight为正常值即可。
<div class="parent">
<div class="child">The first inline element!<br>
The second inline element!</div>
</div>
.parent{
height: 300px;
line-height: 300px;
width: 500px;
border: 1px solid black;
text-align: center;
}
.child{
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
效果图如下：
verticle-align
这里顺带提一下 vertical-align:middle；这个神坑，刚开始一直以为这个就是垂直居中，后来发现怎么用都不奏效，自己去查了一下文档，才了解到：
vertical-align:该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
也就是说vertical-align:middle;只能让行内元素相对于该行居中，详细见以下示例：
<div class="parent">
<span class="child">This is a
<span class="top">Top</span>
<span class="middle">Middle</span>
<span class="bottom">Bottom</span>
inline element!</span>
</div>
.parent{
width: 400px;
height: 350px;
border: 1px solid black;
text-align: center;
}
.child{
font-size: 32px;
display: inline-block;
vertical-align: middle; /*在块级父元素中垂直居中无效*/
border: 1px solid black;
}
.top{
font-size: 16px;
vertical-align: top;
}
.middle{
font-size: 16px;
vertical-align: middle;
}
.bottom{
font-size: 16px;
vertical-align: bottom;
}
效果如下图：
方法三、利用padding上下内边距相等，实现垂直居中，对于单行、多行均有效。该方法的缺点在于父级单位的高度不确定。
<div class="parent">
<span class="child">This is a inline element!</span>
</div>
.parent{
padding: 50px 0;
width: 400px;
border: 1px solid black;
text-align: center;
}
.child{
font-size: 32px;
border: 1px solid black;
}
块级元素
方法四： absolute绝对定位 该方法适用于子元素高度确定的情形
<div class="parent">
<div class="child">This is a block element!</div>
</div>
.parent{
position: relative; /*别忘了父元素加上定位*/
margin: 50px auto;
height: 300px;
width: 500px;
border: 1px solid black;
}
.child{
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 150px;
margin-left: -100px; /*宽度的一半*/
margin-top: -75px; /*高度的一半*/
border: 1px solid black;
}
方法五、 对于子元素高度不确定的情形，利用absolute定位+transform
.parent{
position: relative;
height: 300px;
width: 500px;
border: 1px solid black;
}
.child{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border: 1px solid black;
}
实践看来，这个方法基本适用于各类情况，包括行内，块级。
#######方法六、flexbox弹性盒子，CSS3提供的弹性盒子模型，真的很强大。用于单个子元素的居中也是超级简单。
.parent{
height: 300px;
width: 500px;
border: 1px solid black;
display: flex;
justify-content: space-around; /* 水平居中*/
align-items: center; /*垂直居中*/
}
就是这么简单，flexbox，哈哈！
最后
以上就是常见的居中问题解决办法，有可能有些情况没有考虑到，以后再补充了。希望大家也不再为居中的问题而烦恼。
博客新人，纯手码，大家觉得有帮助的点个赞呗，也欢迎留言交流，嘻嘻！
