css实现水平垂直居中

最新推荐文章于 2024-06-03 18:53:48 发布

KanaseKanon

最新推荐文章于 2024-06-03 18:53:48 发布

阅读量189

点赞数

本文链接：https://blog.csdn.net/KanaseKanon/article/details/113516773

版权

1、position:relative

<body>
    <div class="content">要居中</div>
</body>
<style>
    *{
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .content{
        width: 300px;
        height: 300px;
        background: orange;
        line-height: 300px;
        text-align: center;
        margin: 0 auto;
        position: relative;
        top:50%;
        margin-top: -150px;
    }
</style>

2、position:absolute

<body>
    <div class="content"></div>
</body>
<style>
    *{
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .content{
        width: 300px;
        height: 300px;
        background: orange;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
</style>

display:flex

使用flex布局的时候一定要加上一个父元素并且宽高等于100%，不然撑不起body

<body>
    <div class="parent">
         <div class="content"></div>
    </div>
</body>
<style>
    *{
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .parent{
        height: 100%;
        width: 100%;
        background: orangered;
        display: flex;
    }
    .content{
        height: 300px;
        width: 300px;
        background: orange;
        margin: auto;
    }
</style>

KanaseKanon

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css实现水平垂直居中

1、position:relative<body> <div class="content">要居中</div></body><style> *{ height: 100%; width: 100%; margin: 0; padding: 0; } .content{ width: 300px; height: 3
复制链接

扫一扫