CSS——几种万能居中的方法

比如说在网页中想要一个宽高分别为300px,200px的div盒子（.box）水平/垂直居中。可以通过以下几种方法实现～

calc()

  .box{
            position: fixed;
            top:calc(50% - 100px);
            left: calc(50% - 150px);
            width: 300px;
            height: 200px;
            background-color: pink;
        }

calc 中的50%是指父级盒子的一半，减号 的空格不能少，
如果是计算top值，减去div一半的height；
如果是计算left值，减去div一半的width，嗯，这样就可以实现水平垂直都居中啦。

通过定位

• 水平居中

.box{
            position: fixed;
            left: 0;right: 0;margin: auto;
            width: 300px;
            height: 200px;
            background-color: pink;
        }

• 垂直居中

.box2{
            position: fixed;
            top: 0;bottom: 0;margin: auto;
            width: 300px;
            height: 200px;
            background-color: pink;
        }

• 水平垂直居中

.box2{
            position: fixed;
            top: 0;right:0;bottom: 0;left:0;
            margin: auto;
            width: 300px;
            height: 200px;
            background-color: pink;
        }

将元素更改为为inline-block元素后水平居中

.box的父元素{
	text-align:center;
}
.box{
	display:inline-block;
}

将元素更改为block元素后水平居中

.box{
	display:block;
	margin:auto;
}

利用flex布局进行垂直居中

.box的父元素{
	display:flex;
	align-items:center;
}