<style
>
.test
style
>
<div
class
="test"
style
="background-color: lightblue;width: 200px;"
>測試文字
div>
【思路二】text-align + vertical-align
在父元素設定text-align和vertical-align，並將父元素設定為table-cell元素，子元素設定為inline-block元素
[注意]若相容ie7-瀏覽器，將結構改為結構來實現table-cell的效果；用display:inline;zoom:1;來實現inline-block的效果
<style
>
.parent
.child
style
>
<div
class
="parent"
style
="background-color: gray; width:200px; height:100px;"
>
<
div
class
="child"
style
="background-color: lightblue;"
>測試文字
div>
div>
若子元素是影象，可不使用table-cell，而是其父元素用行高替代高度，且字型大小設為0。子元素本身設定vertical-align:middle
<style
>
.parent
.child
style
>
<div
class
="parent"
style
="background-color: gray; width:200px; "
>
<
img
class
="child"
src=""
width
="50%"
alt="test"
>
div>
【思路三】margin + vertical-align
<style
>
.parent
.child
style
>
<div
class
="parent"
style
="background-color: lightgray; width:200px; height:100px; "
>
<
div
class
="child"
style
="background-color: lightblue;"
>測試文字
div>
div>
【思路四】使用absolute
利用絕對定位元素的盒模型特性，在偏移屬性為確定值的基礎上，設定margin:auto
<style
>
.parent
.child
style
>
<div
class
="parent"
style
="background-color: lightgray; width:200px; height:100px; "
>
<
div
class
="child"
style
="background-color: lightblue;"
>測試文字
div>
div>
利用絕對定位元素的偏移屬性和translate()函式的自身偏移達到水平垂直居中的效果
[注意]ie9-瀏覽器不支援
<style
>
.parent
.child
style
>
<div
class
="parent"
style
="background-color: lightgray; width:200px; height:100px; "
>
<
div
class
="child"
style
="background-color: lightblue;"
>測試文字
div>
div>
在子元素寬高已知的情況下，可以配合margin負值達到水平垂直居中效果
<style
>
.parent
.child
style
>
<div
class
="parent"
style
="background-color: lightgray; width:200px; height:100px; "
>
<
div
class
="child"
style
="background-color: lightblue;"
>測試文字
div>
div>
【思路五】使用flex
[注意]ie9-瀏覽器不支援
在伸縮專案上使用margin:auto
<style
>
.parent
.child
style
>
<div
class
="parent"
style
="background-color: lightgray; width:200px; height:100px; "
>
<
div
class
="child"
style
="background-color: lightblue;"
>測試文字
div>
div>
在伸縮容器上使用主軸對齊justify-content和側軸對齊align-items
<style
>
.parent
style
>
<div
class
="parent"
style
="background-color: lightgray; width:200px; height:100px; "
>
<
div
class
="child"
style
="background-color: lightblue;"
>測試文字
div>
div>
【思路六】使用grid
[注意]ie10-瀏覽器不支援
在網格專案中設定justify-self、align-self或者margin: auto
<style
>
.parent
.child
style
>
<div
class
="parent"
style
="background-color: lightgray; width:200px; height:100px; "
>
<
div
class
="child"
style
="background-color: lightblue;"
>測試文字
div>
div>
在網格容器上設定justify-items、align-items或justify-content、align-content
<style
>
.parent
style
>
<div
class
="parent"
style
="background-color: lightgray; width:200px; height:100px; "
>
<
div
class
="child"
style
="background-color: lightblue;"
>測試文字
div>
div>
css實現水平居中 垂直居中 垂直水平居中布局
1.只需要把行內元素包裹在乙個屬性display為block的父層元素中，並為父層元素新增如下屬性即可 parent2.塊狀元素解決方案 item3.多個塊狀元素解決方案將元素的display屬性設定為inline block，並且把父元素的text align屬性設定為center即可 paren...
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...