元素水平垂直居中（僅做自我總結,侵權刪）

鬧鬧不愛鬧發表於2018-09-14

居中元素定寬高

1. absolute + 負margin

2. absolute + margin auto

3. absolute + salc

居中元素不定寬高

1. absolute + transform

2. text-align + vertical-align

3. writing-mode:

4. table

5. css-table

6. flex

7. grid

// absolute + 負margin
parent {
    position: relative;
}
son {
    position: absolute;
    top: 50%; // 相對於父元素的寬高
    left: 50%;
    margin-left: -{自身寬度}px;
    margin-top: -{自身高度}px;
}複製程式碼

// absolute + margin auto
parent {
    position: relative;
}
son {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

複製程式碼

// absolute + calc
parent {
    position: relative;
}
son {
    position: absolute;
    left: calc(50% - {自身寬度一半}px);
    top: calc(50% - {自身寬度一半}px);
}複製程式碼

// position + transform
parent {
    position: relative;
}
son {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); // 自身寬高的50%
};複製程式碼

// textAlign+ lineHeight(行內元素給父元素設定text-align可以達到水平居中)
parent {
    text-align: center;
    line-height: {自身高度}px;
}
son {
    display: inline-block;
    line-height: {自身高度}px;

}

複製程式碼

// textalign + verticalAlign(lineheight+vertical垂直居中，display+textalign水平居中)
parent {
    text-align: center;
    line-height: {自身高度}px;
}
son {
    display: inline-block;
    vertical-align: middle;
    
}複製程式碼

// flex
parent {
    display: flex;
    justify-content: center; // 水平居中
    align-items: center; // 垂直居中
}複製程式碼

// grid
parent {
    display: grid;
}
son {
    justify-self: center;
    align-self: center;
}複製程式碼

參考資料： https://juejin.im/post/5b9a4477f265da0ad82bf921#heading-1


相關文章