利用相对定位实现盒子在网页水平垂直居中

您所在的位置:网站首页 垂直居中css代码 利用相对定位实现盒子在网页水平垂直居中

利用相对定位实现盒子在网页水平垂直居中

2024-07-10 06:32| 来源: 网络整理| 查看: 265

上一篇我们用绝对定位实现了盒子相对于整个页面水平居中,其实实现盒子水平居中的方式又很多种,这篇我们利用相对定位实现盒子的水平居中。

话不多说,直接上代码。

利用相对定位实现盒子水平居中 * { margin: 0; padding: 0; } body { height: 100vh; position: relative; } div { position: absolute; left: 50%; top: 50%; margin-top: -100px; margin-left: -100px; width: 200px; height: 200px; background-color: aqua; }

 

 如果不加margin的话,就会使盒子的左上角居中,从而使整个盒子偏右下,用margin的话就解决这个问题了。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3