未知寬高

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>