首先有两种方式：已知居中元素的宽高、未知居中元素的宽高
实现方式：
- 方法1【未知居中元素宽高】：利用定位+margin:auto
- 方法2【已知居中元素宽高】：利用定位+margin:负值
- 方法3【未知居中元素宽高】：利用定位+transform
- 方法4【已知居中元素宽高】：table布局
- 方法5【未知居中元素宽高】：flex布局
- 方法6【未知居中元素宽高】：grid布局
方法1【未知居中元素宽高】：
<style> .father{ width:500px; height:300px; border:1px solid #0a3b98; position: relative; } .son{ width:100px; height:40px; background: #f0a238; position: absolute; top:0; left:0; right:0; bottom:0; margin:auto; } </style> <div class="father"> <div class="son"></div> </div>
父级相对定位，子级绝对定位并设置四个位置属性为0，若子级没有宽高，那么会继承父级宽高
这时候直接使用margin:0 auto即可上下居中
方法2【已知居中元素宽高】：
<style> .father { position: relative; width: 200px; height: 200px; background: skyblue; } .son { position: absolute; top: 50%; left: 50%; margin-left:-50px; margin-top:-50px; width: 100px; height: 100px; background: red; } </style> <div class="father"> <div class="son"></div> </div>
位置1是红块1的位置
当设置left、top为50%后，移动到红块2位置
设置margin为负值时，移动到红块3的位置
方法3【未知居中元素宽高】：
<style> .father { position: relative; width: 200px; height: 200px; background: skyblue; } .son { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100px; height: 100px; background: red; } </style> <div class="father"> <div class="son"></div> </div>
解释一下translate(-50%,-50%)将元素位移到子级宽高的50%
方法4【已知居中元素宽高】：
<style> .father { display: table-cell; width: 200px; height: 200px; background: skyblue; vertical-align: middle; text-align: center; } .son { display: inline-block; width: 100px; height: 100px; background: red; } </style> <div class="father"> <div class="son"></div> </div>
设置父元素为display:table-cell，子元素设置 display: inline-block
利用vertical和text-align可以让所有的行内块级元素水平垂直居中
方法5【未知居中元素宽高】：
<style> .father { display: flex; justify-content: center; align-items: center; width: 200px; height: 200px; background: skyblue; } .son { width: 100px; height: 100px; background: red; } </style> <div class="father"> <div class="son"></div> </div>
display: flex时，表示该容器内部的元素将按照flex进行布局
align-items: center表示这些元素将相对于本容器水平居中
justify-content: center也是同样的道理垂直居中
方法6【未知居中元素宽高】：
<style> .father { display: grid; align-items:center; justify-content: center; width: 200px; height: 200px; background: skyblue; } .son { width: 10px; height: 10px; border: 1px solid red } </style> <div class="father"> <div class="son"></div></div>
总结
根据元素标签性质分为：内联元素居中布局、块级元素居中布局
块级元素居中布局
水平居中
定宽: margin: 0 auto
绝对定位+left:50%+margin:负自身一半
垂直居中
position: absolute设置left、top、margin-left、margin-top(定高)
display: table-cell
transform: translate(x, y)
flex(不定高，不定宽)
grid(不定高，不定宽)，兼容性相对比较差
内联元素居中布局
水平居中
行内元素可设置：text-align: center
flex布局设置父元素：display: flex; justify-content: center
垂直居中
单行文本父元素确认高度：height === line-height
多行文本父元素确认高度：display: table-cell; vertical-align: middle
