css 文字和div垂直居中

1.单行文字垂直居中

单词文字居中比较简单，只要height和line-height相等即可,多余属性可以忽略

<div style="height:100px;width: 100px;background-color: #96A1E8;line-height:100px;">
    asdasdasd
</div>

2.多行文字垂直居中

可以用tabel+tabel-cell来实现

<div style="height:100px;width: 100px;background-color: #96A1E8;display: table;">
    <span style="display: table-cell;vertical-align: middle;">
    asdasdasdas
    asdasdasd
    </span>
</div>

3.div水平垂直居中

如果知道尺寸的话可以用负margin来实现

<div style="height: 100px;width: 100px;position:absolute;left: 50%;top: 50%;margin-top:-50px;margin-left:-50px;"></div>

这里还有种方法是用margin:auto

<div style="height: 100px;width: 100px;background-color: #000000;position:absolute;left: 0;top: 0;bottom:0;right:0;margin: auto;"></div>

如果用css3的话，可以用translate

<div style="height: 100px;width: 100px;position:absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);"></div>

而且还可以用flexbox，flexbox可以做的事情很多，打算专门再总结一下，这里主要利用主轴和侧轴来实现居中

<div style="display: flex;flex-flow:row;align-items:center;justify-content:center;
width: 300px;height: 300px;background-color: #96A1E8;">
    <div style="width: 40px;height: 40px;background-color: #000000;"></div>
</div>

align-items是侧轴对齐，justify-conten是主轴对齐