置中

解説

  1. margin預設為0,有些元素預設有margin
  2. 以元素區塊右上角為中心,置中
    position: absolute;
    top: 50%;
    left: 50%;
    父元素position: relative;
    *此時置中中心點是元素右上角,非元素中心,所以看起來會不均衡。
  3. 將置中中心換成元素中心
    transform: trasnlateX(-50%)  trasnlateY(-50%)

transform: trasnlate

以元素中心為基準點,做偏移
【transform: trasnlateX(-50%)】以水平軸為基點,向左偏移元素長一半

範例

<h3>title</h3>
h3{
 margin: 0px;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translateX(-50%) translateY(-50%);
}

Display

title

flex法

display: flex
justify-content: center  水平置中
align-items: center 垂直置中

<h3>title</h3>
body,html{
 width: 100%;
 height: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
}

Display

title

text-align & line-height 法(寫在母元素)

【母元素】

  • 水平置中:text-align
  • 垂直置中:line-height

【子元素】

display: inline-block
※即使子元素只有1個,也要設inline-block。
因為預設的display: block右邊的margin會很長

情況一:子元素裡面沒有東西

line-height的數値:母元素的height + 子元素的height

#parentBox
 .child
 .child
#parentBox //母元素height=500px
  width: 300px
  height: 300px
  background-color: #eee
  text-align: center
  line-height: 330px //300px+30px=330px

  
 
 .child //子元素height=100px
  width: 30px
  height: 30px
  display: inline-block //
  background-color: #beddcd

Display

情況二:子元素裡面有東西

【母元素】
line-height:母元素的height
【子元素】
line-height:子元素的height

#parentBox
 .child A
 .child B
#parentBox
  width: 300px
  height: 300px
  background-color: #eee
  text-align: center
  line-height: 330px

  
 
 .child
  width: 30px
  height: 30px
  display: inline-block
  background-color: #beddcd
  line-height: 30px

Display

A
B

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *