在使用 css 設置頁面樣式時會常常遇到須要居中的狀況,下面我總結了一些 css 在不一樣條件下實現居中的方法。有一些方法具備一些 hack 味道,你們看看就好。
爲了方便顯示居中效果,給父元素和子元素都設置了邊框和背景樣式,因爲效果都差很少,對於每個方法我就不截圖顯示了,水平居中的大概實現是這樣的
若是要看每個方法的具體表現,能夠查看標題後的在線例子css
<style> .parent { border: 1px solid #000; background-color: rgb(214, 120, 52); height: 200px; } .child { border: 1px solid #000; background-color: chartreuse; font-size: 32px; width: 150px; margin: 0 auto; } </style> <div class="parent"> <div class="child">children 子元素</div> </div>
<style> .parent2 { border: 1px solid #000; background-color: rgb(214, 120, 52); height: 200px; text-align: center; } .child2 { border: 1px solid #000; background-color: chartreuse; font-size: 32px; display: inline-block; } </style> <div class="parent2"> <div class="child2">children 子元素</div> </div>
<style> .parent3 { border: 1px solid #000; background-color: rgb(214, 120, 52); height: 200px; text-align: center; } .child3 { border: 1px solid #000; background-color: chartreuse; font-size: 32px; width: 150px; display: inline-block; } </style> <div class="parent3"> <div class="child3">children 子元素</div> </div>
inline 類型的元素設置高寬是無效的,所以也沒有定不定寬的說法,這裏寫上是爲了看起來一致html
<style> .parent4 { border: 1px solid #000; background-color: rgb(214, 120, 52); height: 200px; text-align: center; } .child4 { border: 1px solid #000; background-color: chartreuse; font-size: 32px; display: inline; } </style> <div class="parent4"> <div class="child4">children 子元素</div> </div>
<style> .parent5 { border: 1px solid #000; background-color: rgb(214, 120, 52); height: 200px; display: flex; justify-content: center; align-items: center; } .child5 { border: 1px solid #000; background-color: chartreuse; font-size: 32px; } </style> <div class="parent5"> <div class="child5">children 子元素</div> </div>
<style> .parent6 { border: 1px solid #000; background-color: rgb(214, 120, 52); height: 200px; display: flex; } .child6 { border: 1px solid #000; background-color: chartreuse; font-size: 32px; margin: auto; } </style> <div class="parent6"> <div class="child6">children 子元素</div> </div>
<style> .parent7 { border: 1px solid #000; background-color: rgb(214, 120, 52); height: 200px; display: grid; justify-content: center; align-items: center; } .child7 { border: 1px solid #000; background-color: chartreuse; font-size: 32px; } </style> <div class="parent7"> <div class="child7">children 子元素</div> </div>
<style> .parent7-2 { border: 1px solid #000; background-color: rgb(214, 120, 52); height: 200px; display: grid; } .child7-2 { border: 1px solid #000; background-color: chartreuse; font-size: 32px; justify-self: center; align-self: center; } </style> <div class="parent7-2"> <div class="child7-2">children 子元素</div> </div>
<style> .parent8 { border: 1px solid #000; background-color: rgb(214, 120, 52); height: 200px; display: grid; } .child8 { border: 1px solid #000; background-color: chartreuse; font-size: 32px; margin: auto; } </style> <div class="parent8"> <div class="child8">children 子元素</div> </div>
<style> .parent9 { border: 1px solid #000; background-color: rgb(214, 120, 52); height: 200px; position: relative; } .child9 { border: 1px solid #000; background-color: chartreuse; font-size: 32px; margin: auto; width: 150px; height: 100px; position: absolute; left: 0; right: 0; bottom: 0; top: 0; } </style> <div class="parent9"> <div class="child9">children 子元素</div> </div>
fit-content 這屬性具備兼容問題web
<style> .parent10 { border: 1px solid #000; background-color: rgb(214, 120, 52); height: 200px; position: relative; } .child10 { border: 1px solid #000; background-color: chartreuse; font-size: 32px; margin: auto; position: absolute; width: fit-content; height: fit-content; left: 0; right: 0; bottom: 0; top: 0; } </style> <div class="parent10"> <div class="child10">children 子元素</div> </div>
<style> .parent11 { border: 1px solid #000; background-color: rgb(214, 120, 52); height: 200px; position: relative; } .child11 { border: 1px solid #000; background-color: chartreuse; font-size: 32px; margin: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } </style> <div class="parent11"> <div class="child11">children 子元素</div> </div>
<style> .parent12 { border: 1px solid #000; background-color: rgb(214, 120, 52); height: 200px; /* width 設置百分比會失效,若是寬度不設置就由子元素的內容寬度決定 */ width: 1000px; display: table-cell; text-align: center; vertical-align: middle; } .child12 { border: 1px solid #000; background-color: chartreuse; font-size: 32px; } </style> <div class="parent12"> <div class="child12">children 子元素</div> </div>
<style> .parent13 { border: 1px solid #000; background-color: rgb(214, 120, 52); height: 200px; text-align: center; } .parent13::before { content: ""; line-height: 200px; font-size: 0; } .child13 { border: 1px solid #000; background-color: chartreuse; font-size: 32px; /* display: inline-block; */ display: inline; vertical-align: middle } </style> <div class="parent13"> <div class="child13">children 子元素</div> </div>
這個方法受默認排版影響,也是有兼容問題的flex
<style> .parent15 { border: 1px solid #000; background-color: rgb(214, 120, 52); height: 200px; writing-mode: vertical-lr; text-align: center; } .child15 { border: 1px solid #000; background-color: chartreuse; font-size: 32px; writing-mode: horizontal-tb; /* display: inline; */ display: inline-block; width: 100%; } </style> <div class="parent15"> <div class="child15">children 子元素</div> </div>
<style> .parent16 { border: 1px solid #000; background-color: rgb(214, 120, 52); } .child16 { border: 1px solid #000; background-color: chartreuse; font-size: 32px; width: 150px; /* margin: auto; */ /* padding: 50px 0; */ margin: 50px auto; } </style> <div class="parent16"> <div class="child16">children 子元素</div> </div>
<style> .parent17 { border: 1px solid #000; background-color: rgb(214, 120, 52); text-align: center; } .child17 { border: 1px solid #000; background-color: chartreuse; font-size: 32px; /* display: inline-block; */ display: inline; line-height: 200px; } </style> <div class="parent17"> <div class="child17">children 子元素</div> </div>
<style> .parent18 { border: 1px solid #000; background-color: rgb(214, 120, 52); width: 20%; position: relative; } .parent18::before { content: ""; display: block; width: 0; height: 0; padding: 50% 0; } .child18::before, .child18::after { content: ""; display: block; position: absolute; background-color: chartreuse; left: 50%; top: 50%; transform: translate(-50%, -50%); } .child18::before { width: 50%; height: 5%; } .child18::after { height: 50%; width: 5%; } </style> <div class="parent18"> <div class="child18"></div> </div>
主要總結了一些平常遇到的 css 居中方法,其中列舉的方法也能夠組合使用,若是你有其餘居中例子,歡迎留言分享spa