前端：css实现垂直水平居中

css实现垂直水平居中，HTML结构如下

<div class="box">
	<div class="con"></div>
</div>

<style type="text/css">
  .box {
        width: 300px;
        height: 300px;
        background: #111;
        display: flex;
        align-items: center; 		/* 垂直居中 */
        justify-content: center;	/* 水平居中 */
    }
   .box .con {
        width: 100px;
        height: 100px;
        background-color: #fff;		
    } 
</style>