Cacher is the code snippet organizer for pro developers

近期发现的新网站

http://howtocenterincss.com/

** 居中总结 **

http://guowenfh.github.io/2016/01/06/css-position-middle/ http://blissz.cn/?p=136

水平居中

div {
    display: table;
    position: relative; 
}

div {
  margin: 0 auto;
  width: 100%;
}

内联元素(p等)的垂直居中

0x 1

https://jsfiddle.net/62ohbysu/

0x 2

<div>
  <p>Vertical Middle</p>
</div>

div{
    height: 100px;
    display: table;
}

div > p {
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}

0x 3

https://jsfiddle.net/a1exlism/9jz8m112/

常用居中

Support: IE9.0+

.vertical_center {
    position: relative;
    top: 50%;       
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}