都知道的水平垂直居中方式

面试: 你知道的水平垂直居中方式

总结常用的水平、垂直居中方式

(若没有特殊说明，均以div为例，为方便看到效果，自定义添加样式)

方式一：给元素设置绝对定位

(假设div宽100px高100px)

div{
	width: 100px;		//自定义宽
    height: 100px;		//自定义高
    background-color: chartreuse;		//自定义背景颜色
	position:absolute;
	left: 50%;
	top: 50%;
	margin-left: -50px;
	margin-top: -50px
}

不足：就是要提前获得元素的宽高

方法二：给元素设置绝对定位

(假设div宽100px高100px)

div{
	width: 100px;		//自定义宽
    height: 100px;		//自定义高
    background-color: rgb(50, 95, 5);	//自定义背景颜色
	position: absolute;
	left: calc(50% - 50px);	//这里减号两边一定要空格！！
	top: calc(50% - 50px)
}

可能有人会问了，怎么都是要知道元素的宽高呢！而且还要计算！

请往下看

方式三：给元素设置绝对定位

div{
	width: 100px;			//自定义宽
    height: 100px;			//自定义高
    background-color: chartreuse;	//自定义背景颜色
	position: absolute;
	left: 50%;
	top: 50%;
	transform: tranlate(-50%, -50%)
}

方法四：给元素设置绝对定位

div{
	width: 100px;		//自定义宽
    height: 100px;		//自定义高
    background-color: chartreuse;	//自定义背景颜色
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

假设你要设置class类名为row的div元素垂直居中

	<div class="wrap">
		<div class="row"></div>
	</div>

方法五：使用flex布局

	.wrap{
		width: 500px;   //自定义宽
        height: 500px;  //自定义高
        border: 1px solid #ddd; //为方便看到效果 
        display: flex;
        justify-content: center;   //主轴(默认是x轴)居中
        align-items: center;       //交叉轴
	}
	// 自定义样式
	.row{
		width: 100px;
		height: 100px;
		background-color: chartreuse;
	}	

方法六：table-cell布局

	.wrap{
		width: 500px;		//自定义父级宽
        height: 500px;		//自定义父级高
        border: 1px solid #ddd; //为方便看到效果 
        display: table-cell;
        vertical-align: middle;
        text-align: center;
	}
	// 自定义样式
	.row{
		width: 100px;
		height: 100px;
		background-color: chartreuse;
		display: inline-block; 
	}	

注意：如果子元素的块级元素，则需添加display:inline-block

文本元素

另外，如果是文本元素，可在其父级添加text-align:center;实现水平居中，再line-height: 高度; 实现垂直居中
如：

	.div{
	   width: 500px;	
       height: 500px;
       background-color: #000;
       text-align: center;
       line-height: 500px;
	}
	<div>
		<span>点赞的最帅了</span>
	</div>

运行结果：