定位: 将元素居中 将元素水平居中 将元素垂直居中 样式: 文字毛玻璃效果 -------------------------------------------代码------------------------------------------------------ 将元素居中: 1.使用绝对定位实现1 { width: 50px; height: 50px; /*设置元素宽高*/ position: absolute; /*修改为绝对定位*/ top: 50%; left: 50%; /*设置与上、左的距离*/ margin-top: -25px; margin-left: -25px; /*外边距分别为宽高的一半*/ } 2.使用绝对定位实现2 { position: absolute; left: 50%; top: 50%; transform: tranplate(-50%, -50%); } 3.使用父元素文本流水平居中,单元格显示垂直居中 #parent{ text-align: center; /*设置子元素水平居中*/ display: table-cell; /*设置为表格单元格显示*/ vertical-align: middle; /*设置垂直对齐方式为居中*/ } #child{ display: inline-block; } 将元素水平居中 1.使用外边距自动实现(相对父元素居中) { margin: 0 auto; } 2.将父元素文本流水平居中,配合子元素变成行内快(child里的文字也会水平居中,可以在.child添加text-align:left;还原) #parent{ text-align: center; } #child{ display: inline-block; } 将元素垂直居中 1.将父元素设置为表格单元格显示,使内容垂直居中(子元素垂直居中) #parent{ display: table-cell; /*设置为表格单元格显示*/ vertical-align:middle; /*设置垂直对齐方式为居中*/ } 文字毛玻璃效果 1.将文字设置成黑色透明,然后加上投影 { color:rgba(0,0,0,0); text-shadow: 0 0 10px black; }