垂直居中

文章目录

1. 1. 单行文字
2. 2. 多行文字
3. 3. 已知子元素高度
4. 4. 未知子元素高度

https://segmentfault.com/a/1190000014116655

单行文字

height: 20px;
line-height: 20px;

多行文字

/* 或者使用flex */
.wrap { display: table }
.child { display: table-cell; vertical-align: middle }

已知子元素高度

/* 方法一 */
.child { position:fixed; height: 100px; top: 0; bottom: 0; margin: auto;  }

/* 方法二 */
.child { position:fixed; height: 100px; top: 50%; margin-top: -50px; }

未知子元素高度

/* 方法一 */
.wrap { display: flex; align-items: center;}

/* 方法二 */
.child { position: fixed; top: 50%; left:50%; tranfrom: translate(-50%, -50%;) }