纵向居中

Posted 2020-07-07 乐少007

单行文字居中，固定宽高居中，平时很常见，我们都可以轻而易举的实现

未知宽度，高度的容器要实现水平垂直居中

如下

.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