元素左右上下居中

    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);

50%定位，在平移50%

我们使用的是CSS3中的transform: translateY属性。transform属性通常是用作旋转或放大缩小元素，但translateY功能却能够用来实现竖向居中。这里没有用到绝对定位，或设置行高。你无需知道父元素有多高。

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

有人指出，使用这种方法，元素在沿translateY移动时会损失“半个像素”，导致元素变得模糊。ok，对于这种问题，解决的方法是对其父元素使用preserve-3d属性。CSS代码如下：

.parent-element {
  -webkit-transform-style: preserve-3d;
}

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

 

转载于:https://www.cnblogs.com/gopark/p/9546618.html