css随笔

1. 关于使用pre标签，且要自动换行

可以使用：

word-wrap: break-word;
white-space: pre-wrap;

2. 更改placeholder样式

.input::-webkit-input-placeholder
{
    color: #a1a1a1;
}
.input:-moz-input-placeholder
{
    color: #a1a1a1;
}
.input::-moz-input-placeholder
{
    color: #a1a1a1;
}
.input:-ms-input-placeholder
{
    color: #a1a1a1;
}

3. 修改选中样式

body::selection {
    color:#FFFFFF;
    background-color:#E84893;
    text-shadow:none;
}

4. 水平垂直居中

可以试试 display: table-cell;

此时父元素不能使用定位(垂直不居中)，不能(无效)使用百分比宽高，不能使用浮动，不能flex(垂直不居中)。解决以上可以通过再嵌套一层DOM。

.mid {
     width: 400px;
     height: 400px;
     display: table-cell;
     text-align: center;
     vertical-align: middle;
}

<div class="container mid">
    <img src="./img/222222.png" alt="logo">
</div>