flex弹性布局实现：元素竖排，水平垂直居中排版

<style type="text/css"> 
			.box1{
				display:flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
			} 
			.item{
				width: 500px;
				height: 500px;
				border: 1px solid #111;
			}
			.item span{width: 80px;height: 80px;background: #999;color: #fff;text-align: center;line-height:80px;}
			.item span:nth-of-type(even){background: #333;}
        </style>
        <div class="box1 item">
        	<span>1</span>
        	<span>2</span>
        	<span>3</span>
        	<span>4</span>
        </div>