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