“同学你好，请论述你知道的居中一个元素的方法”，这句话是不是很耳熟，居中问题在前端面试中出现的频率很高，很多人都知道几个居中的方法，但是很少人能说出所有的居中方法。前方高能，史上最强居中整理来袭。
首先，如果遇到面试官问：“请论述你知道的居中一个元素的方法”，你先反问面试官：“亲爱的面试官，是水平居中还是垂直居中？是块元素还是行内元素？是否知道宽和高？是否考虑兼容性？”问完之后睁大眼睛凝视面试官，吓他一跳，如果面试官说：“那你把各种情况都说说”，行，那咱们今天就来说说。
一、水平居中
1. 块元素
- 实用性：☆☆☆☆☆
- 兼容性：☆☆☆☆****☆
子元素设置：margin：0 auto
<style>
#parent{
width: 200px;
height: 200px;
background-color: cornflowerblue;
}
#children{
width: 100px;
height: 100px;
background-color: pink;
margin: 0 auto;
}
</style>
<div id="parent">
<div id="children">
水平居中，块元素
</div>
</div>
效果图如下：
2. 行内元素、行内块元素
- 实用性：☆☆☆☆☆
- 兼容性：☆☆☆☆****☆
父元素设置：text-align：center
<style>
#parent{
width: 200px;
height: 200px;
background-color: cornflowerblue;
text-align: center;
}
span{
background-color: pink;
}
</style>
<div id="parent">
<span>行内元素span</span>
</div>
效果图如下：
二、垂直居中
1. 行内元素：
- 实用性：☆☆☆☆☆
- 兼容性：☆☆☆☆****☆
父元素：line-height：XX px（line-height的高度与height高度一致）
<style>
#parent{
width: 200px;
height: 200px;
background-color: cornflowerblue;
line-height: 200px;
}
span{
background-color: pink;
}
</style>
<div id="parent">
<span>行内元素span</span>
</div>
效果图如下：
2. 行内块元素
- 实用性：☆☆☆☆☆
- 兼容性：☆☆☆☆****☆
父元素：line-height：xxpx（与height高度相同）
子元素：display：inline-block， vertical-align：middle
vertical-align属性是针对行内块元素生效的，他的值大小是参照line-height进行设置。
<style>
#parent{
width: 200px;
height: 200px;
background-color: cornflowerblue;
line-height: 200px;
}
#children{
width: 100px;
height: 100px;
background-color: pink;
display: inline-block;
vertical-align: middle;
}
</style>
<div id="parent">
<div id="children"></div>
</div>
效果图如下：
三、水平垂直居中
1.已知宽高，需要用到宽高，通过absolute+margin（负数）的方法
- 实用性：☆☆☆****☆
- 兼容性：☆☆☆☆****☆
设置方法：
<style>
#parent{
width: 200px;
height: 200px;
background-color: cornflowerblue;
position: relative;
}
#children{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
</style>
<div id="parent">
<div id="children">
需要设置宽高，也需要用到宽高
</div>
</div>
效果图
2.已知宽高，用calc方法（CSS3规则，IE8及以下不支持）
- 实用性：☆☆☆****☆
- 兼容性：☆☆☆☆
设置方法：
<style>
#parent{
width: 200px;
height: 200px;
background-color: cornflowerblue;
position: relative;
}
#children{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
top:calc(50% - 50px);
left:calc(50% - 50px)
}
</style>
<div id="parent">
<div id="children">
需要设置宽高，也需要用到宽高
</div>
</div>
效果图：
3.已知宽高，但是不需要用到宽高
- 实用性：☆☆☆
- 兼容性：☆☆☆☆****☆
设置方法：
<style>
#parent{
width: 200px;
height: 200px;
background-color: cornflowerblue;
position: relative;
}
#children{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
}
</style>
<div id="parent">
<div id="children">
需要设置宽高，但是不需要用到宽高
</div>
</div>
效果图如下：
虽然没有用到宽高，但是子元素是需要设定宽高的，margin才能起效果，如果不设置子元素就会自动撑满父元素的宽高
<style>
#parent{
width: 200px;
height: 200px;
background-color: cornflowerblue;
position: relative;
}
#children{
background-color: pink;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
}
</style>
<div id="parent">
<div id="children">
需要设置宽高，但是不需要用到宽高
</div>
</div>
效果图如下：
4.不需要设定宽高，用transform，（CSS3规则，IE8及以下不支持）
- 实用性：☆☆☆☆☆
- 兼容性：☆☆☆☆
设置方法：
<style>
#parent{
width: 200px;
height: 200px;
background-color: cornflowerblue;
position: relative;
}
#children{
background-color: pink;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
</style>
<div id="parent">
<div id="children">
未设定宽高，水平垂直居中
</div>
</div>
效果图如下：
5.使用table布局：inline-block+table>tr>td
- 实用性：☆☆☆
- 兼容性：☆☆☆☆****☆
实用性确实不行，一般情况下不建议采用table进行布局
设置方法：
<style>
td{
width: 200px;
height: 200px;
background-color: cornflowerblue;
text-align: center;
}
#children{
background-color: pink;
display: inline-block;
}
</style>
<div id="parent">
<table>
<tr>
<td>
<div id="children">
inline-block+table布局
</div>
</td>
</tr>
</table>
</div>
效果图如下：
6.inline-block+table-cell
- 实用性：☆☆☆****☆
- 兼容性：☆☆☆☆****☆
配置方法：
<style>
#parent{
width: 200px;
height: 200px;
background-color: cornflowerblue;
display:table-cell;
text-align: center; //水平
vertical-align: middle; //垂直
}
#children{
background-color: pink;
display: inline-block;
}
</style>
<div id="parent">
<div id="children">
inline-block+table-cell设置
</div>
</div>
效果图如下：
7.inline-block+writing-mode 两层嵌套（工作中很少用）
- 实用性：☆☆☆
- 兼容性：☆☆☆☆****☆
配置方法：
<style>
#parent{
width: 200px;
height: 200px;
background-color: cornflowerblue;
writing-mode: vertical-lr;
text-align: center;
}
#children{
width: 100%;
background-color: pink;
display: inline-block;
writing-mode: horizontal-tb;
text-align: center;
}
#grandson{
display: inline-block;
vertical-align: middle;
text-align: center;
}
</style>
<div id="parent">
<div id="children">
<div id="grandson">
两层嵌套,先文字垂直居中，再文字水平居中
</div>
</div>
</div>
效果图如下：
8.inline-block+父子字体（工作中很少用）
- 实用性：☆☆☆
- 兼容性：☆☆☆☆****☆
配置方法：
<style>
#parent{
width: 200px;
height: 200px;
background-color: cornflowerblue;
text-align: center;
//高度为height*0.64
font-size: 128px;
}
#children{
background-color: pink;
display: inline-block;
vertical-align: middle;
font-size: 12px;
}
</style>
<div id="parent">
<div id="children">
通过字体风骚设置居中
</div>
</div>
效果图如下：
9.神器：display：flex（CSS3规则，IE9及以下不支持）
- 实用性：☆☆☆☆☆
- 兼容性：☆☆****☆
配置方法：
<style>
#parent{
width: 200px;
height: 200px;
background-color: cornflowerblue;
display: flex;
justify-content: center;
align-items: center;
}
#children{
background-color: pink;
}
</style>
<div id="parent">
<div id="children">
布局神器display：flex
</div>
</div>
效果图如下：
10.Grid布局（CSS3规则，IE9及以下，Chrome56及以下，Firefox51及以下，安卓5及以下，IOS10.2及以下，不支持）
- 实用性：☆☆☆☆☆
- 兼容性：☆☆****☆
配置方法：
<style>
#parent{
width: 200px;
height: 200px;
background-color: cornflowerblue;
display: grid;
}
#children{
background-color: pink;
align-self: center;
justify-self: center;
}
</style>
<div id="parent">
<div id="children">
Grid布局
</div>
</div>
效果图如下：
一共整理了14中方法，对于面试还是希望大家都记住，对于工作找到2-3种合适自己的即可。
良心吐血整理，如果你还有其他方法，欢迎评论区补充哦。
