400-800-9385
网站建设资讯详细

网站前端制作之如何让一个div保持页面上下左右居中

发表日期:2019-10-14 10:52:32   作者来源:乐文庆   浏览:3502   标签:网站前端制作    
在日常web前端页面开发中经常会遇到页面居中的弹窗功能,设计师在设计这些弹窗的时候一般都是设计成页面居中的。如下:
 

DIV块



这里就是一个图标和一行文字相对于整个背景居中。
那么用什么方式实现比较方便呢
  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值之后的区域宽高。
当然也还有其他方式来实现居中效果,这里就不一一列出了。
如没特殊注明,文章均为方维网络原创,转载请注明来自https://www.szfangwei.cn/news/5368.html