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

2023-12-29    分类： 网站建设

在日常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值之后的区域宽高。
当然也还有其他方式来实现居中效果，这里就不一一列出了。

以上就是关于网站前端制作之如何让一个div保持页面上下左右居中(网站前端设计与制作)，希望对你有帮助，更多内容关注创新互联。

文章标题：网站前端制作之如何让一个div保持页面上下左右居中(网站前端设计与制作)
链接URL：https://www.cdcxhl.com/news5/310905.html

成都网站建设公司_创新互联，为您提供App设计、小程序开发、网站收录、手机网站建设、网站内链、网站设计公司

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

小程序开发

网站建设知识

同城分类信息