transform:translate(-50%,-50%)的应用场景
最近在封装一个弹窗我css的代码是这样写
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background: #fff;
width: 300px;
height: 150px;
z-index: 12;
border-radius: 6px;
overflow: auto;
出来的效果也复合我的要求，如图： 但是字数多几行之后就会出现这样的问题，要么样式崩掉，要么出现滚动条，如图： 真的好丑，在这样的背景下我就去看了weui的源码，看下他是怎么写，发现他用的是transform:translate(-50%,-50%)，所以我就试了一下。具体代码如下：
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
margin: auto;
background: #fff;
padding: 0 20px 20px 20px;
// max-width: 250px;//限制宽度过宽
z-index: 12;
border-radius: 6px;
效果： 发现宽度是根据屏幕的大小来自动调节的，如果你不不想要那么宽，可以设置max-width这个属性就可以了。 总结：trasform:translate(-50%,-50%)除了可以水平垂直居中，还可以根据屏幕的大小来调节自身的宽度，做弹框时不用设置宽高，缺点是有的浏览器不支持，他支持的浏览器有：
上一篇：
IDEA上Java项目控制台中文乱码