元素居中问题汇总
前几天面试，遇到了一个面试题，关于如何水平，垂直，水平垂直居中的问题，自己答案，写的不是太好，今天就总结一下。
(一)水平居中
（1）块元素 > 行内元素居中
这种情况比较简单直接上代码
<div id='outer'> <span id ="inner">inner</span> </div>
#outer{
text-align:center;
background-color:#666;
width:200px;//有无宽度，均可
}
#inner{
color:#fff;
font-size:20px;
background-color:red;
}
效果如下：
（2）块元素 > 块元素居中
1）宽度一定时,利用margin: 0 auto
<div id='outer'> <div id ="inner">inner</div> </div>
#outer{
background-color:#666;
width:200px;//有无宽度，均可
}
#inner{
color:#fff;
font-size:20px;
background-color:red;
width:100px;
margin:0 auto;
}
效果如下：
2）宽度未定时，利用display: inline-block与text-align:center;
<div id='outer'> <div id ="inner">inner</div> </div>
#outer{
text-align:center;
background-color:#666;
width:200px;//有无宽度，均可
}
#inner{
color:#fff;
font-size:20px;
background-color:red;
display:inline-block;
/*display:inline; *//*变成行内元素，会失去padding,margin上下，以及宽高设置，不建议使用*/
}
效果如下：
3）多个div
<div id='outer'> <div id ="inner">inner</div> <div id ="inner2">inner2</div> <div id ="inner3">inner3</div> </div>
#outer{
text-align:center;
background-color:#666;
width:200px;//有无宽度，均可
}
#inner,#inner2,#inner3{
color:#fff;
font-size:20px;
background-color:red;
display:inline-block;
/*display:inline; *//*变成行内元素，会失去padding,margin上下，以及宽高设置，不建议使用*/
}
效果如下：
（二）水平垂直居中
1.块元素> 块元素
（1）无视宽高，利用table-cell
<div id='outer'> <div id ="inner">inner</div> </div>
#outer{
text-align:center;
background-color:#666;
width:200px;
height:200px;
vertical-align:middle;
display:table-cell;
}
#inner{
color:#fff;
font-size:20px;
background-color:red;
display:inline-block;
}
效果如下：
（2）绝对定位（未知高度）
<div id='outer'> <divid ="inner">inner</div> </div>
#outer{
background-color:#666;
width:200px;
height:200px;
position:relative;
}
#inner{
color:#fff;
font-size:20px;
background-color:red;
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
margin:auto;
width:60px;//宽度，高度均要有，不然inner元素会被拉伸直到铺满父元素
height:60px
}
效果如下：
（3）绝对定位（已知高度）
<div id='outer'> <div id ="inner">inner</div> </div>
#outer{
background-color:#666;
width:200px;
height:200px;
position:relative;
}
#inner{
color:#fff;
font-size:20px;
background-color:red;
position:absolute;
top:50%;
left:50%;
width:60px;
height:60px;
margin-left:-30px;
效果如下：
2.div块元素>span行内元素
<div id='outer'> <span id ="inner">inner</span> </div>
#outer{
background-color:#666;
width:200px;
height:200px;
display:table-cell;//关键点，然后设置下面的vertical,text-align
vertical-align:middle;
text-align:center;
}
#inner{
color:#fff;
font-size:20px;
background-color:red;
}
或者
#outer{
background-color:#666;
width:200px;
height:200px;
line-height:200px;//关键点
text-align:center;
}
#inner{
color:#fff;
font-size:20px;
background-color:red;
}
效果如下：
3. 利用Css3显威力(inner宽度已知，未知均可)
<divid='outer'> <divid ="inner">inner</div> </div>
#outer{
background-color:#666;
width:200px;
height:200px;
position:relative;
}
#inner{
color:#fff;
font-size:20px;
background-color:red;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
效果如下：
4 flexBox（inner宽度已知，未知均可）
<div id='outer'> <divid ="inner">inner</div> </div>
#outer{
background-color:#666;
width:200px;
height:200px;
display:flex;
justify-content:center;
align-items:center;
}
#inner{
color:#fff;
font-size:20px;
background-color:red;
}
效果如下：
目前就发现了这么多，后续不断完善中。