jsfiddle 1 – 您可以在容器上使用position:relative,并在对象上使用absolute:absolute,如下所示:
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
text-align: center;
顶部:50%将对象移动到容器的垂直中心,选择对象的顶部作为参考(而不是其中心),因此变换:translateY将其向上移动50%的距离,使其完全位于中间容器(由物体中心).
ps:text-align:center;左:0;右:0;和margin:auto用于水平对齐.
jsfiddle 2 – 或者使用display:flex在容器上使用align-items来垂直对齐内容,如下所示:
display: -webkit-flex; /* Safari */
display: flex;
-webkit-align-items: center; /* Safari 7.0+ */
align-items: center;
-webkit-justify-content: center;
justify-content: center;
ps:对齐内容用于水平对齐.