CSS代码片段

Posted 2021-11-25 hujingnb

定位:
    将元素居中
    将元素水平居中
    将元素垂直居中
样式:
    文字毛玻璃效果
    
    
    
    
    
    
-------------------------------------------代码------------------------------------------------------
    
将元素居中:
    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;
    }