CSS筆記 - 垂直與水平置中的方式彙整
垂直置中的方式:
設置行高
- line-hight 跟元素高度相同= div height
- 當內容只有單行時適用
vertical-align:middle
- element為inline或 inline-block時適用
- note:vertical-align是用於對齊行內或是表格內cell
絕對位置設定
- top, left, bottom, right :0
- position: absolute
- margin: auto
display: flex全套
- display:flex
- flex-wrap:nowrap
- align-items:center
- align-content:center
- justify-content:center
相對位置設定
- position:relative
- top:50%
- transform:translateY(-50%)
偽元素
- ::before
- display:inline-block
- height:100%
計算樣式(cals)
top:cals(50%- 1/2*selfhight)
Comments