在css中，居中方式不管是在面试还是在日常使用之中都是一个经常会遇到的问题，接下来就介绍一下对应的常用解决方法。
水平居中
1、text-align
该属性只能够控制行内元素（例如是图片、文字、超链接等）完成水平居中设置。
可选属性值：center、left、right等
2、margin：0 auto
对于块级元素（div等）来说，使用margin是水平居中最常用的方式了
3、flex布局
在flex布局之中通过设置主轴方向为横轴（默认方向），然后使用justify-content：center完成水平居中设置。
设置主轴方向：flex-direction：row/row-reverse/column/column-reverse
justify-content可选属性值：
- flex-start：左对齐
- flex-end：右对齐
- center：居中
- space-around：每个项目两侧的间隔相等
- space-between：项目之间的间隔都相等
- space-evenly：每个项目的间隔与项目和容器之间的间隔是相等的
4、grid布局
与flex布局类似，直接设置justify-content：center即可完成水平居中设置
justify-content可选属性值：start | end | center | stretch | space-around | space-between | space-evenly。
其中stretch表示项目大小没有指定时，每个项目都会拉伸占据整个网格容器
垂直居中
为了能够更加好地叙述，将会设置以下公共代码：
<div class='f'>
<div class='c'></div>
</div>
.f {
background-color: red;
width: 300px;
height: 300px;
}
.c {
background-color: green;
width: 100px;
height: 100px
}
1、vertical-align
该方法只适用于行内元素、表格元素、行内块级元素，不能够用于块级元素的对齐操作。
居中值：vertical-align:middle
2、绝对定位
这个方法将会是以父元素为基准、把子元素设置为绝对定位，根据双方的高度差来计算居中值。
clac：计算对应的居中高度，如下：
top: calc(50% - 50px);
margin：将上边距与右边距设置为负值，大小为子元素自身宽高的一半：如下
margin：-50px 0 0 -50px
3、line-height
适用于单行文本之中，将对应值设置为子元素自身的高度即可居中
line-height:100px
4、flex布局
align-items
.f {
display: flex;
align-items: center;
justify-content: center
}
align-self
.c {
align-self: center
}
5、grid布局
与flex布局的方法相同，使用grid布局时，垂直居中只需要在容器（父元素）中设置align-item:center或者是在项目（item）中设置align-self:center，那么就能够完成垂直居中操作。
总结
个人认为考虑到整体的页面布局工作的话，那么使用flex布局将会是完成居中需求的最好的办法。同时对于部分需要居中的区域来说，text-align与margin:0 auto也能够在水平居中之中发挥巨大作用。对于该区域的垂直居中，使用calc计算当前的高度也是不错的做法
