div嵌套居中的三种方法

原创于 2022-10-20 13:02:37 发布 · 2.3k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

杂专栏收录该内容

5 篇文章

订阅专栏

html

<div class="div1">
    <div class="div2">
        div2
    </div>
</div>

css

.div1 {
    background-color: aqua;
    height: 100px;
    width: 100px;

    /* 方法一、三 */
    /* 子元素为绝对定位，父元素必须为相对定位 */
    /* position: relative; */

    /* 方法二 */
    /* display: flex;
    justify-content: center;
    align-items: center; */
}

.div2 {
    background-color: yellow;
    height: 50px;
    width: 60px;

    /* 方法一 */
    /* position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto; */

    /* 方法三 */
    /* position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
}