让元素水平垂直居中的方法

最新推荐文章于 2022-08-01 17:04:08 发布

小熊猫潘达

最新推荐文章于 2022-08-01 17:04:08 发布

阅读量233

点赞数

分类专栏：前端开发文章标签： html css

本文链接：https://blog.csdn.net/Panda0218/article/details/78719977

版权

前端开发专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1.绝对定位法

HTML:
<body>
    <div class="box"></div>
</body>

CSS:
<style>
.box{
    position:absolute;
    top:0;
    bottom: 0;
    left:0;
    right: 0;
    margin: auto;
    width:100px;
    height:100px;
    background:red;
    }
</style>

2.margin负值法

HTML:
<body>
    <div class="box"></div>
</body>

CSS:
<style>
.box{
    position:absolute;
    top:50%;
    left:50%;
    margin-left: -50px;
    margin-top:-50px;
    width:100px;
    height:100px;
    background:red;
    }
</style>

优惠劵

小熊猫潘达

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
让元素水平垂直居中的方法

1.绝对定位法HTML:<body> <div class="box"></div></body>CSS:<style>.box{ position:absolute; top:0; bottom: 0; left:0; right: 0; margin: auto; width:100px; height:100px;
复制链接

扫一扫