在日常web前端页面□□开发中经□□常会遇到●页面居中□□□的弹窗功◉能，设计师在□□□□设计这些◇弹窗的时□□□候一般都□□是设计成□□□□页面居中□□□□的。如下：
 

这里就是一个图标和一行文字相对于整个背景居中。
那么用什么方式实现比较方便呢

1. 切一张透□□□明png图片，和底图大▲小一致的，直接放上□□去。这种最简□□单省力，但是对后□□□期修改文□□字图标不□□是很友好。
2. 将图标和□□□文字单独·出来，用一个固□□□定大小的div包裹住，运用定位◉来居中，这里默认□□□该div大小为300 x 300; 实现代码□□□□如下：

.div{
position: absolute;
Left:50%;
Top:50%;
Margin-left: -150px;
Margin-top: -150px;
Text-aline: center;
}
这里做到✦了div的相对居□□□□中，然后还要◉测量图标◤和文字之□□□间的间隔，给img一个margin-bottom，来实现上□□下居中，这种方式丨就比较灵□□□□活了，图标和文□□字都能随□□□□时更换，但是由于◆限制了宽□□□高，所以也存□□□□在一定的※局限性。

1. 直接通过设置包裹的div的定位来居中，不限宽高，如下：

Div{
position: absolute;
Left:50%;
Top:50%;
transform: translate(-50%,-50%);
}
这样就实□□□□现了相对※居中，而且不会◆因为div里内容的◥多少而出▽现位置的□□□□偏差。算是比较□□□□完美的实※现方式了。当然也要□□注意显示□□上的优化，如果文字□□□过多，出现换行•的情况，最好是在□□两边留点♦边距，看起来不◉那么生硬。如下：
Div{
position: absolute;
Left:50%;
Top:50%;
transform: translate(-50%,-50%);
Padding:20px;
Box-sizing:border-box;
}
这里padding:20px;是设置上□□下左右边☆距为20像素，使内容不□□贴边。而box-sizing:border-box;这个属性丨则是设置padding的值包含□□□在div的区域内，不是在区□□□□域外增加□□□□边距，对一些要▽求特殊的□□□布局能起□□□到很好的□□□□兼容作用，不用计算◣抛开padding值之后的□□□区域宽高。
当然也还有其他方式来实现居中效果，这里就不一一列出了。