单行文字居中,固定宽高居中,平时很常见,我们都可以轻而易举的实现
未知宽度,高度的容器要实现水平垂直居中
如下
.demo {
width: 80%;
height: auto;
position: relative;
border: 1px #000 solid;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
margin:0 auto;
}
有人指出,使用这种方法,元素在沿translateY
移动时会损失“半个像素”,导致元素变得模糊。ok,对于这种问题,解决的方法是对其父元素使用preserve-3d
属性。CSS代码如下:
.parent-element {
-webkit-transform-style: preserve-3d; } .element { position: relative; top: 50%; transform: translateY(-50%); }
(这段参考http://www.webhek.com/translatey-vertical-align/ 网络资源 )
感谢@酱油
demo下载地址: http://files.cnblogs.com/files/leshao/%E7%BA%B5%E5%90%91%E5%B1%85%E4%B8%AD.rar