fixed定位——定宽高盒子垂直水平居中

CaseyWei

已于 2022-03-25 16:28:53 修改

阅读量1.1k

点赞数

分类专栏： HTML CSS 文章标签： css html5 css3

于 2022-03-25 16:28:00 首次发布

本文链接：https://blog.csdn.net/caseywei/article/details/123739056

版权

CSS 同时被 2 个专栏收录

81 篇文章

订阅专栏

HTML

42 篇文章

订阅专栏

1.通过transform实现：


<style type="text/css">
    .center {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>

2.通过设置margin实现：

<style type="text/css">
    .center {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin:auto; // 实现水平和垂直的自适应
    }
</style>