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%)除了可以水平垂直居中，还可以根据屏幕的大小来调节自身的宽度，做弹框时不用设置宽高，缺点是有的浏览器不支持，他支持的浏览器有：