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

将一个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; }