实用代码片段---持续记录

将一个Div盒子变成输入框

Html代码样式

<div class="div divContent" contentEditable></div>

CSS代码样式

.div{//输入框样式
        height: 200px;
        width: 400px;
        border:1px solid #FF8000;
        border-radius: 4px;
    }
.divContent{//输入框内样式
        padding: 16px;
        color: #000000;
        font-size: 16px;
    }

单行文字垂直居中

Html代码样式

<div class="div verticalCenter1">
    你若盛开，清风自来···
    </div>

CSS代码样式

    .div{
        height: 200px;
        width: 400px;
        border:10px outset #FF8000;
    }
    .verticalCenter1{  /*单行文字*/
        font-size: 16px;
        line-height: 200px;
        text-align: center;
    }

多行文字垂直居中

Html代码样式

    <div class="div verticalCenter2">
        你若盛开，清风自来nbvn, jnkilphio;····<br>，清风自来···你若盛开·<br>你若盛开，清风自来····<br>你若盛开，清风自来····
    </div>

CSS代码样式

    .div{
        height: 200px;
        width: 400px;
        border:10px outset #FF8000;
    }
    .verticalCenter2{   /*多行文字*/
        display: table-cell;
        vertical-align:middle;
        text-align: center;
    }

图片垂直居中

Html代码样式

    <div class="div verticalCenter3">
        <img src="q.jpg" alt="" width="100px" height="50px">
    </div>

CSS代码样式

    .div{
        height: 200px;
        width: 400px;
        border:10px outset #FF8000;
    }
    .verticalCenter3{ /*图片*/
        position: relative;
    }
    .verticalCenter3 img{  
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%); 
    }

图文垂直居中

Html代码样式

    <div class="div verticalCenter4">
        <img src="q.jpg" alt="" width="150px" height="50px">
        <p style="display:block">你若盛开，清风自来nbvn, jnkilphio;····<br>，清风自来···你若盛开·<br>你若盛开，清风自来····<br>你若盛开，清风自来····<br></p>
    </div>

CSS代码样式

    .div{
        height: 200px;
        width: 400px;
        border:10px outset #FF8000;
    }
        .verticalCenter4{ /*图片*/
        display: flex;
        justify-content:center;
        align-items: center;
        /* 注意这里需要设置高度来查看垂直居中效果 */
        height: 300px;
    }