要素の上下中央配置

今まで、面倒くさかった要素を中央配置にする方法が、cssの position と transform を使用することによって簡単に実現可能になります。

覚えておくと今後コーディングする際の時短技になるかもしれません

.center {
width: 100%;
height: 500px;
position: relative;
}

.center .inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);/*translate(X方向の距離, Y方向の距離)*/
}

IE8などのcss3未対応のブラウザなどでは使用できませんが、スマホなどやモダンブラウザ対応なら活躍できる技だと思います。