弹性布局--------水平垂直居中

#centerBox{
	 border:1px solid red;
	 height: 100px;
	 width: 100px;
	 margin:0 auto;
	 display: -webkit-box;
	  display: -ms-flexbox;
	  display: -webkit-flex; 
	  display: flex;
	  -webkit-box-pack: center;
	  -ms-flex-pack: center;
	  -webkit-justify-content: center;
	  justify-content: center;  /* justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。 */
	  -webkit-box-align: center;
	  -ms-flex-align: center;
	  -webkit-align-items: center;
	  align-items: center;  /* align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。 */
	  flex-direction: column;
}

猜你喜欢

转载自blog.csdn.net/goldenlegs/article/details/81115047