Web前端开发-实现网页元素水平和垂直居中对齐

效果图

---

.html文件

@charset "utf-8";

/* CSS Document */
* {
	margin: 0px;
	padding: 0px;
}

html,
body {
	height: 100%;
}

body {
	background-image: url(../4.img/132701.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}
/* 
	对齐方式-对盒元素内部的文字、图像及子元素都是有效的
	水平方向:box-pack  取值:start|end|center|justify
	垂直方向:box-align 取值:start|end|center|baseline|stretch
	注意:需要开启弹性盒模型 display: box;
	*/
#box {
	width: 100%;
	height: 100%;
	background-image: url(../4.img/132702.png);
	background-repeat: repeat;
	/*开启弹性盒模型*/
	display: box;
	display: -webkit-box;
	display: -moz-box;
	/*水平居中*/
	box-pack: center;
	-webkit-box-pack: center;
	-moz-box-pack: center;
	/*垂直居中*/
	box-align: center;
	-webkit-box-align: center;
	-moz-box-align: center;
	/*垂直底部对齐 使元素紧贴底部 */
	/* box-align: end;  
	-webkit-box-align: end;
	-moz-box-align: end; */
}

#logo {
	width: 220px;
	height: 220px;
	/* margin: 0 auto; */
}