固定定位下div水平居中

在元素进行固定定位后，要想让div元素水平居中。可使用代码：

left: 50%;
transform:translateX(-50%);

应用到元素上即

.red-block{
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform:translateX(-50%);
}

即可实现元素水平居中。

原理是首先让元素左边界为50%处，再向左平移元素自身的一半。

 

若是想让元素在页面水平和竖直都居中，则

.red-block{
  width: 300px;
  height: 300px;
  background: red;

  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}