css使用transform垂直對齊

說明

1、使用transform從單行文字、段落到box，都會垂直對齊。

2、translate屬性可以改變元素的位置，translateX(10px)實現x座標軸移動10個單位，如果是負值，則沿相反方向移動。

同樣，translateY可以實現Y座標軸的位移；transform:translate(-50%,-50%)表示先沿x座標移動元素本身寬度50%的長度(負值相反方向)，再沿y座標移動元素本身高度50%的長度(負值反向)。

例項

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

以上就是css使用transform垂直對齊的方法，希望對大家有所幫助。更多css學習指路：

本文教程操作環境：windows7系統、css3版，DELL G3電腦。