css居中方式

样式居中的方式也是在web面试中比较常见的问题，笔者也整理了几种常见实现方式，有不足之前请指出学习

1.padding内边距

padding: 50px;
box-sizing: border-box;

2.margin外边距

margin: 0 auto;

3.定位

position: relative;
position: absolute;
top:25%;
left: 25%;

4.transform

position: relative;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);

5.弹性布局

display: flex;
align-items: center;
justify-content: center;

6.不固定元素

display:table-cell

7.垂直居中

height: 50px;
line-heigth:50px

8.多块级元素水平居中

text-align: center;
display: inline-block;