1）使用top: 50%使得元素上邊界偏移至頁面豎直方向上的中心線
2）使用position: relative使得實際展示的元素相對於本身位置進行偏移
3）使用transform: translatey(-50%)使得實際展示的元素向上移動自身高度的一半
lang
="en"
>
>
charset
="utf-8"
>
>
html,body
.content
style
>
head
>
>
class
="content"
>
div>
body
>
html
>
display:flex
2）外層使用flex-direction: column指定排布為豎直方向
3）外層使用justify-content: center表示內部元素向中間對齊
4）內部元素的height需小於外部元素的height
lang
="en"
>
>
charset
="utf-8"
>
>
.box
.child
style
>
head
>
>
class
="box"
>
class
="child"
>
div>
>
class
="child"
>
div>
div>
body
>
html
>
position: relative|absolute|fixed（若外層元素position: static，子元素無法使用父級元素定位）
2）內層元素position: absolute絕對定位，根據首個position不為static的祖先類進行定位
3）top: 50%：內層元素的上邊界距離祖先類的上邊界為祖先類高度的50%
4）margin: -50px 0 0 0;50px = child.height/2 使得內層元素再上移自身高度的一半，使得內層元素與外層元素的垂直中心線重合
相容性較好，但是需要知道子元素的高度
lang
="en"
>
>
charset
="utf-8"
>
>
.box
.child
style
>
head
>
>
class
="box"
>
class
="child"
>
div>
div>
body
>
html
>
position: relative|absolute|fixed（若外層元素position: static，子元素無法使用父級元素定位）
2）內層元素position: absolute絕對定位，根據首個position不為static的祖先類進行定位，即父類box
3）top: 0; bottom: 0;規定子元素盒模型的position上下距離相等
4）margin: auto自動設定子元素margin，使得子元素盒模型外邊距margin和父元素盒模型內容content的距離為top和bottom設定的值。
lang
="en"
>
>
charset
="utf-8"
>
>
.box
.child
style
>
head
>
>
class
="box"
>
class
="child"
>
div>
div>
body
>
html
>
line-height= 300px;設定文字的顯示高度。範圍為content從上至下300px
2）對於子元素，設定vertical-align: middle;，即文字顯示範圍內向中間對齊
lang
="en"
>
>
charset
="utf-8"
>
>
.box
.box div
style
>
head
>
>
class
="box"
>
>
balabaladiv
>
div>
body
>
html
>
display: table;設定展示模式為**
2）子元素display: table-cell;作為父元素**的乙個單元格
3）子元素vertical-align: middle;表示單元格內容對齊方式為居中對齊
vertical-align屬性只對擁有valign特性的html元素起作用，例如**元素中的等等
lang
="en"
>
>
charset
="utf-8"
>
>
.box
.child
style
>
head
>
>
class
="box"
>
class
="child"
>
balabaladiv
>
div>
body
>
html
>
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...
css 垂直居中
先膜拜一下鏈結裡的人。1.這個方法把一些 div 的顯示方式設定為 因此我們可以使用 的 vertical align property 屬性。divid divid cell divclass content content goes herediv div div cell 2.這個方法使用絕對...