【CSS】元素 垂直水平居中

未知宽高

1、使用flex布局实现元素的垂直水平居中。（该方法加在父级div中，作用于子元素）

垂直居中：align-items:center; display: -webkit-flex;(父元素)
水平居中：justify-content:center; display: -webkit-flex; (父元素)

(当前元素)margin: 0 auto;
(父元素)text-align:center;(当前元素)display: inline-block;

<div class="container">
	<div class="center"></div>
</div>

.container{
	display: flex;
	justify-content: center;
	align-items: center;
}

2、未知元素的宽高，实现元素的垂直水平居中 。
translateX属性的百分号取值是相对元素本身取值的。另外，父元素需要相对定位position:relative;

<div class="container">
	<div class="center"></div>
</div>

.container{
    position:relative;
}
 
.center{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

3.第三种也可实现

.container{
    position:relative;
    width: 400px;
    height: 400px;
    background: #eee;
}
 
.center{
	width: 100px;
    height: 100px;
    background: #fff;
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

已知宽高

1、已知元素的宽高，实现元素的垂直水平居中。
先将元素整体向左、向下移动相对水平居中元素的50％，再利用margin为负值，反向拖动元素本身大小的一半，即可实现。
left，top属性的百分号是相对父元素取值的。

<div class="container">
	<div class="center"></div>
</div>

.container{
    position:relative;
}
 
.center{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-50px 0 0 -50px;
}

<div class="container">
	<div class="center"></div>
</div>