在平常web前端页面开拓中经常会遇到页面居中的弹窗功能，筹算师在筹算这些弹窗的时分普通都是筹算成页面居中的。以下：
这里就是一个图标和一行笔墨相干于全部布景居中。
那末用甚么体例完成对比便利呢
- 切一张通明png图片，和底图巨细同等的，直接放上去。这类最简单省力，然则对前期批改笔墨图标不是很友爱。
- 将图标和笔墨单独出来，做网站，用一个活动巨细的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，来完成崎岖居中，这类体例就对比矫捷了，图标和笔墨都能随时调换，然则因为限制了宽高，以是也存在一定的范围性。
- 直接经由过程设置包裹的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值以后的地区宽高。
虽然也另有其他体例来完成居中成果，这里就不一一列出了。