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

效果图
.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; */ }

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