CSS實現水平居中的5種思路

將子元素的display設定為inline-block，使子元素變成行內元素

<

div 
class
="parent"
style
="background-color: gray;"
>
<
div 
class
="child"
style
="background-color: lightblue;"
>demo
div>
div>

這種方法的不足之處在於，子元素的text-align繼承了父元素的center，文字也居中顯示，所以需要在子元素中設定text-align:left

【思路二】：在本身元素設定margin: 0 auto實現塊級元素水平居中

<

div 
class
="parent"
style
="background-color: gray;"
>
<
div 
class
="child"
style
="background-color: lightblue;"
>demo
div>
div>

該方案的優點在於，只設定父級元素即可實現居中效果

若子元素定寬，則可以使用絕對定位的盒模型屬性，實現居中效果；若不設定寬度時，子元素被拉伸

<

style
>
.parent
.child
style
>

<

div 
class
="parent"
style
="background-color: gray;height: 20px;"
>
<
div 
class
="child"
style
="background-color: lightblue;"
>demo
div>
div>

【思路三】: 通過絕對定位的偏移屬性實現水平居中

配合translate()位移函式

<

div 
class
="parent"
style
="background-color: gray;height: 20px;"
>
<
div 
class
="child"
style
="background-color: lightblue;"
>demo
div>
div>

配合relative

relative數值型的偏移屬性是相對於自身的，但百分比卻是相對於包含塊的。因為子元素已經被設定為absolute，所以若使用relative，則需要增加一層結構，使其寬度與子元素寬度相同

[注意]該方法全相容，但是增加了html結構

<

div 
class
="parent"
style
="background-color: gray;height: 20px;"
>
<
div 
class
="childwrap"
>
<
div 
class
="child"
style
="background-color: lightblue;"
>demo
div>
div>
div>

配合負margin

margin的百分比是相對於包含塊的，所以需要增加一層結構。由於寬度width的預設值是auto，當設定負margin時，width也會隨著變大。所以此時需要定寬處理

<

style
>
.parent
.childwrap
.child
style
>

<

div 
class
="parent"
style
="background-color: gray;height: 20px;"
>
<
div 
class
="childwrap"
>
<
div 
class
="child"
style
="background-color: lightblue;"
>demo
div>
div>
div>

【思路四】: 使用彈性盒模型flex實現水平居中

[注意]ie9-瀏覽器不支援

在伸縮容器上設定主軸對齊方式justify-content:center

<

div 
class
="parent"
style
="background-color: gray;"
>
<
div 
class
="child"
style
="background-color: lightblue;"
>demo
div>
div>

在伸縮專案上設定margin: 0 auto

<

style
>
.parent
.child
style
>

<

div 
class
="parent"
style
="background-color: gray;"
>
<
div 
class
="child"
style
="background-color: lightblue;"
>demo
div>
div>

【思路五】: 使用柵格布局grid實現水平居中

[注意]ie10-瀏覽器不支援

在網格容器上設定justify-items或justify-content

<

style
>
.parent
style
>

<

div 
class
="parent"
style
="background-color: gray;"
>
<
div 
class
="child"
style
="background-color: lightblue;"
>demo
div>
div>

在網格專案中設定justify-self或者margin: 0 auto

<

style
>
.parent
.child
style
>

<

div 
class
="parent"
style
="background-color: gray;"
>
<
div 
class
="child"
style
="background-color: lightblue;"
>demo
div>
div>

CSS實現水平垂直同時居中的6種思路

style test style div class test style background color lightblue width 200px 測試文字 div 思路二 text align vertical align 在父元素設定text align和vertical align，並將...

css實現水平居中

一 對於行內元素 text align center 二 對於確定寬度的塊級元素 1 margin和width實現水平居中 常用 前提 已設定width值 margin left auto margin right auto 2 絕對定位和margin left 寬度值 2 實現水平居中 固定寬度塊...

css 實現水平居中

水平居中分為塊狀元素和行內元素，而塊狀元素又分為定寬塊狀元素和不定寬塊狀元素。行內元素水平居中 2 定寬塊狀元素 dispaly block 水平居中 塊狀元素的width是乙個固定值 滿足塊狀和定寬兩個條件時，即可通過給自己設定 左右margin為auto 來實現。定寬塊狀元素水平居中 3 不定寬...