前端_水平（左右）居中、垂直居中的方法

水平居中

块级元素水平居中的方法

1、margin：0 auto;
2、将块级元素转化为内联元素，然后给父级加text-align:center;
缺点：inline-block元素会有空白产生
解决方案：给其父元素添加font-size:0;

内联元素水平居中的方法

1、给元素的父级加text-align:center;

垂直居中大法

1、文字的垂直居中

1、设置文字的行高和文字所在的元素的高相同的值（此方法不是绝对的垂直居中，因为文字的奇数行高一般会偏下一些）

line-heght:20px;
height:20px;

2、为元素添加vertical-align

1、为两个同级的内联元素添加vertical-align：middle；
2、在同一个父级中新增加一个内联元素，设置其宽度为0.高度与父级一样。（此方法绝对居中）

width:0;
height:100%;

3、利用display转换使元素垂直居中

1、给父级加display：table-cell; vertical-align:middle;
给子级加：margin：0 auto；

4、利用定位使元素垂直居中

1、利用定位和margin:auto

.box{
			width:200px;
			height:200px;
			position；absolute;
			top：0；
			left:0;
			bottom:0;
			right:0;
			margin:auto;
	}

2、利用定位和margin取值

.box{
			width:400px;
			height:200px;
			position:absolute;
			left:50%;
			top:50%;
			margin:-100px 0 0 -200px;
	}

3、利用定位和translate

	.box{
				width: 400px;
    			height: 400px;
    			background: #0c5460;
   				position: absolute;
    			left: 50%;
    			top: 50%;
    			transform: translate(-50%, -50%);
    }

5、利用grid布局神器

1、针对单行justify-content 和 align-items

 .father {
            width: 500px;
            height: 400px;
            border: black solid;
            display: grid;
            justify-content:center;
            align-item: center;
        }

2、针对多行justify-content 和 align-content

.father {
            width: 500px;
            height: 400px;
            border: black solid;
            display: grid;
            justify-content:center;
            align-content: center;
        }