transform：translate(-50%，-50%)定位实现百分比居中

原创于 2018-05-07 16:56:56 发布 · 8.7k 阅读

16 ·

本内容遵循CC 4.0 BY-SA版权协议

前端学习专栏收录该内容

35 篇文章

订阅专栏

本文介绍了一种利用CSS transform属性实现元素水平垂直居中的方法。通过设置position:absolute; top:50%; left:50%; 和transform:translate(-50%,-50%); 实现了元素在页面上的精确居中。

HTML代码

<div id="translateTest"></div>

CSS代码

#translateTest{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
    height: 30%;
    background-color: blue;
  }

实现一个水平居中的蓝色矩形（矩形的宽高分别为浏览器的30%，30%），效果如下图：

原理：

transform属性

使用top:50%; left:50%;时，是以左上角为原点定位，如下图，是左上角的原点居中，但是元素本身并不居中。

transform：translate(-50%，-50%):向上（X轴）向左（Y轴）移动自身长宽的50%，使其位于中心。同理，需要按比例移动元素的话修改translate的值就可以做到。

注意：需要居中的元素应为绝对定位（position: absolute;）