search

jeddygong / frontend-document

前端每日一练，大厂面试题目，涵盖前端所有知识点，每天进步一点点。HTML/CSS/Javascript/Nodejs/Typescript/ECMAScript/Vue/React/Webpack/小程序/网络/设计模式/数据结构/算法/安全/工程化/性能优化
https://jeddygong.github.io/frontend-document
MIT License
10 stars 4 forks source link

[CSS] [2021-01-14 更新] CSS方式实现一个不知道宽高的 div 居中都有哪几种方法？ #11

Open jeddygong opened 3 years ago

jeddygong commented 3 years ago

方式一：flex 布局

<style>
    .box {
        width: 200px;
        height: 200px;
        border: 1px solid blue;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .item {
        background: red;
    }
</style>
<div class="box">
    <div class="item">
        <h1 >宽高不定</h1>
    </div>
</div>

方式二： Position + transform

<style>
    .box {
        width: 200px;
        height: 200px;
        border: 1px solid blue;
        position: relative;
    }

    .item {
        background: red;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>
<div class="box">
    <div class="item">
        <h1>宽高不定</h1>
    </div>
</div>

方式三：position + margin

<style>
.box {
    width: 200px;
    height: 200px;
    border: 1px solid blue;
    position: relative;
}

.item {
    width: 50%;
    height: 50%;
    background: red;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
</style>
<div class="box">
    <div class="item">
        <h1>宽高不定</h1>
    </div>
</div>

方式四： Grid布局