18/10/30 | baidu 06 | css居中、佈局

常見問題積累

1.誤加分號

樣式塊之間添加分號，導致樣式失效。

---

水平垂直居中彙總

1.水平居中

• 內聯元素：

  父元素，設置text-align: center

• 定寬塊級元素：

  自身，設置margin: 0 auto

• 定寬浮動元素：
  設置定位後，可以重新佈局元素框，進而定位到中點，是從中點開始排布，因此需要會拉自身寬度一半，達到居中的效果。

  自身，設置position: relative; left: 50%; margin-left: -(1/2) width
  自身，設置position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;

• 未知寬度的塊級元素：
  自身，設置display: table; margin: auto
  自身，設置position: absolute; left: 50%; transform: translateX(-50%)
  自身，設置width: fit-content; margin: auto
  自身，設置display: flex; justify-content: center;
  父級，設置display: flex; flex-direction: column; 自身，設置align-self: center
  父級，設置display: flex; 自身，設置margin: auto
  父級，設置display: inline-block; position: relative; left: 50% 自身，設置position: relative; right: 50%

2.垂直居中

• 內聯元素：
  自身，設置line-height: height
  父級，設置line-height: son-height;自身，設置vertical-align: middle
• 知道容器高度並且容器內只有一個元素：
  自身，設置position: relative; top: 50%; transform: translateY(-50%)
• 不知道容器與自身高度：
  父級，設置position: relative; 自身，設置position: absolute；top: 50%; transform: translateY(-50%)
  父級，設置display: flex; align-items: center