CSS水平垂直居中之fit-content布局

實現一個元素水平垂直居中的方法很多：

• 元素未知寬高

width和height的fit-content值只支持Chrome和Firefox瀏覽器

.box {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: fit-content;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    height: fit-content;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    overflow: hidden;
    text-align: center;
    background-color: #eee;
}

• 元素已知寬高

大家對這個應該是很了解的，也是實際開發中運用最多的，推薦給剛剛入門的小伙伴吧。

設置它的父元素為position:relative即可：

第一種方式：

.children{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 300px;
    height: 200px;
    background-color: #5f9a3f;
}

第二種方式：

.children{
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -150px;
    width: 300px;
    height: 200px;
    background-color: #5f9a3f;
}

第三種方式：

使用CSS3新屬性transform的translate屬性

.children{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 300px;
    height: 200px;
    background-color: #5f9a3f;
}

感謝閱讀，歡迎大家來吐糟。