(七) 元素居中 (浮动元素、定位元素等等)

都是按照 水平垂直居中 写的, 单方向居中的原理一样

浮动和定位的元素无论有没有宽高都可以

---

1. 浮动元素

元素设置浮动之后, 其本身就相当于设置了display:inline-block

1.1 relative + translate

浮动的元素: {
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

1.2 通杀flex

父级: {
  display: flex;
  justify-content: center;
}
浮动的元素: {
	align-self: center;
}

2. 绝对定位元素

元素绝对定位之后，其本身就相当于设置了display:inline-block

2.1 relative + translate

绝对定位是以设置了定位的父级元素为参照定位的, 因此需要给父级一个定位

父级: {
  position: relative;
}
绝对定位的元素: {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

2.2 通杀flex

父级: {
  display: flex;
  justify-content: center;
}
绝对定位的元素: {
	align-self: center;
}

3. 普通元素

3.1 块级元素

定宽 / 不定宽 原理都一样

3.1.1 relative + translate

要居中的盒子: {
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

3.1.2 通杀flex

父级: {
  display: flex;
  justify-content: center;
}
块级元素: {
	align-self: center;
}

3.2 行内元素

行内元素: {
  line-height: 父级高度;
  text-align: center;
}

3.3 img

3.3.1 relative + translate

img: {
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

3.3.2 通杀flex

父级: {
  display: flex;
  justify-content: center;
}
img: {
	align-self: center;
}

4. 总结

不管是什么样的元素, 块级, 浮动, 定位等等, 两种通杀的方法: relative + translate 和 flex

relative + translate

  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

flex

父项: {
  display: flex;
  justify-content: center;
}
子项: {
	align-self: center;
}