將子元素的display設定為inline-block，使子元素變成行內元素
這種方法的不足之處在於，子元素的text-align繼承了父元素的center，文字也居中顯示，所以需要在子元素中設定text-align:left
【思路二】：在本身元素設定margin: 0 auto實現塊級元素水平居中
若子元素定寬，則可以使用絕對定位的盒模型，實現居中效果；若不設定寬度時，子元素被拉伸
<style
>
.parent
.child
style
>
<
div
class
="parent"
style
="background-color: gray;height: 20px;"
>
<
div
class
="child"
style
="background-color: lightblue;"
>demo
div>
div>
【思路三】: 通過絕對定位的偏移屬性實現水平居中
配合translate()位移函式
<style
>
.parent
.child
style
>
<
div
class
="parent"
style
="background-color: gray;height: 20px;"
>
<
div
class
="child"
style
="background-color: lightblue;"
>demo
div>
div>
配合relative
relative數值型的偏移屬性是相對於自身的，但百分比卻是相對於包含塊的。因為子元素已經被設定為absolute，所以若使用relative，則需要增加一層結構，使其寬度與子元素寬度相同
[注意]該方法全相容，但是增加了html結構
<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>
配合負margin
margin的百分比是相對於包含塊的，所以需要增加一層結構。由於寬度width的預設值是auto，當設定負margin時，width也會隨著變大。所以此時需要定寬處理
【思路四】: 使用彈性盒模型flex實現水平居中
[注意]ie9-瀏覽器不支援
在伸縮容器上設定主軸對齊方式justify-content:center
<style
>
.parent
style
>
<
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>
垂直居中
待續。。。
css 水平居中 垂直居中 水平垂直居中
一 水平居中 1 行內元素水平居中text align center 2 塊級元素水平居中margin 0 auto 3 多個塊狀元素的水平居中 實現多個水平排列的塊狀元素的水平居中，是將要水平排列的塊狀元素設為display inline block，然後在父級元素上設定text align ce...
css水平居中 垂直居中 水平垂直居中
css水平居中 垂直居中 水平垂直居中 水平居中 行內元素 block text align 塊級元素 方案一 分寬度定不定兩種情況 定寬度 margin 0 auto 作用 使盒子自己居中，意思是上下距離為0，auto就是左右自適應兩邊距離 不定寬度 設定子元素display inline blo...
水平垂直居中
首先，我們來了解水平居中,它有很多種方法，我們暫時先來了解其中的幾種 1.在實現方案中，我們最熟悉的莫過於給元素定義乙個寬度，然後使用margin 1 2 3 4 body 這個是當我們的定義元素的寬度時顯現的，如果我們不能定義寬度時，該怎麼辦呢？2.我們對於定位也是常用的，在這裡當然也可以採用定位...