使用css3 transfrom使内容居中
//html结构
<html>
<body>
<div class="container">
</div>
</body>
</html>
//css
.container{
position:fixed;
background-color:red;
width:200px;
height:200px;
top:20%;
left:50%;
transform:translateX(-50%);
}
使用mint-ui查看popup的居中方式,发现是用left:50%和transform:translateX(-50%)。自己做了下实验,translateX是基于元素本身的宽度计算百分比,从而实现了水平居中。