垂直居中

Tags

css

Created

Aug 28, 2015 12:32 AM

position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;

非替换（non-replaced）绝对定位元素可以占据 top 和 bottom 的值（除 auto 外）所共同指定的可用空间，而不必设置 height（也就是设其为 auto）。left、right 与 width 也类似。

vertical-align: middle

position: relative;
top: 50%;
transform: translateY(-50%);

.parent { display: flex; }
.child { margin: auto; }