假設html元素為下面這樣,父容器和子容器的寬高均為不確定

<div class="parent">
    <div class="child">Demo</div>
</div>

下面四種方案對其水平居中
方案一： test-align+inline-block

.parent{
    text-align: center;
}
.child{
    display: inline-block;
}

優點：兼容性好；
缺點：text-align: center;會被child元素繼承下來，需要額外的代碼來修復.

方案二 margin+table

.child{
    display: table;
    margin:0 auto;
}

優點:只對child元素進行處理.

方案三 absolute+transform

.parent{
    position: relative;
}
.child{
    position: absolute;
    left:50%;
    transform: translateX(-50%);//參照物為自身
}

優點：脫離文檔流，不會對其他元素產生影響；缺點：兼容性差.

方案四 flex+justify—content

.parent{
    display: flex;
    justify-content: center;
}

優點：只對parent元素進行設置