css如何使一个盒子水平垂直居中

咖啡只喝拿铁~

于 2024-08-15 17:16:33 发布

阅读量284

点赞数 11

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/2201_75773271/article/details/141227192

版权

方法一：利用定位(常用方法,推荐）

<style>
.parent{
    width: 500px;
    height: 500px;
    border: 1px solid #000;
    position:relative;
}

.child {
    width: 100px;
    height: 100px;
    border: 1px solid #999;
    position:absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}
</style>

方法二：利用 margin:auto;

<style>
    .parent{
        width: 500px;
        height: 500px;
        border: 1px solid #000;
        position:relative;
    }

    .child {
        width: 100px;
        height: 100px;
        border: 1px solid #999;
        position:absolute;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
</style>

方法三：利用 display：flex;设置垂直水平都居中

<style>
    .parent{
        width: 500px;
        height: 500px;
        border: 1px solid #000;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .child {
        width: 100px;
        height: 100px;
        border: 1px solid #999;
    }
</style>

方法四：利用 transform

<style>
    .parent{
        width: 500px;
        height: 500px;
        border: 1px solid #000;
        position:relative;
    }
    .child {
        width: 100px;
        height: 100px;
        border: 1px solid #999;
        position:absolute;
        top: 50%;
        left: 50%;
        transform:translate(-50%, -50%);
    }
</style>