CSS代码片段
定位: 将元素居中 将元素水平居中 将元素垂直居中 样式: 文字毛玻璃效果 -------------------------------------------代码------------------------------------------------------ 将元素居中: 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; }
相关推荐
hellowzm 2020-10-12
liusure0 2020-01-11
jiedinghui 2019-12-23
gufudhn 2020-06-12
沈宫新 2020-05-04
/*垂直居中,div上边界距离窗口上边的距离为窗口高度的50%,并针对不同浏览器进行兼容。-- 在外层添加一个div,把行内容居中,添加.row .justify-content-center -->
Phoebe的学习天地 2020-04-14
STPace 2020-02-17
xiaohuli 2020-02-12
wangjie 2020-01-12
zuncle 2019-12-30
libowen0 2014-05-30
Simagle 2015-05-27
cssuperman 2018-04-01
ThikHome 2019-07-01
Phoebe的学习天地 2019-07-01
Phoebe的学习天地 2019-07-01
hjfbluesky 2019-07-01
王为仁 2019-07-01