html水平/垂直居中总结
2022-11-08 本文已影响0人
不做null
- 水平居中方案
- 1、如果行内级元素：设置父元素的text-align:center
- 2、如果是块级元素：设置当前块级元素(前提有设置宽度) margin:0 auto
- 3、使用绝对定位(设置绝对定位后的元素不再严格区分是行内、块级、行内块级元素)，此方法行内级元素、块级元素都能使用：元素有设置具体宽度的情况下，设置left:0;right:0;margin:0 auto 实现水平居中
- 4、使用flex布局(flex布局的item不再严格区分块级元素和行内级元素)，此方法行内元素、块级元素都能使用：justify-content:center 实现水平居中
- 垂直居中：
- 1、使用绝对定位：元素有设置具体的高度情况下，设置top:0;bottom:0;margin:auto 0 实现水平居中
- 2、使用flex布局：align-items:center 实现垂直居中
- 3、推荐 - 通过top/transform位移,IE9支持(思路是：子元素顶部先下移到父元素中间位置，然后在想上移动子元素自身高度的一半；同个思路也能实现水平剧中哦)，需要做两个事情：
- 1.让元素向下位移父元素的50%
- 不建议使用margin-top：50%,因为这个50%不是父元素高度的50%
- 扩展：margin-top的百分比是相对于包含块(父元素)的宽度，根据mdn文档总结
- 建议使用(relative不会脱离标准流)：position:relative;top:50%
- 不建议使用margin-top：50%,因为这个50%不是父元素高度的50%
- 2.让元素向上移动自身的50%：transform:translate(0,-50%)
- 1.让元素向下位移父元素的50%
- 使用绝对定位实现水平、垂直居中的弊端：
- 1、必须使用定位(元素会脱离标准流)
- 2、必须给元素设置宽度、高度
- 使用绝对定位实现水平、垂直居中注意事项：
- 在绝大多数情况下，子元素的绝对定位都是相对于父元素进行定位，但是要注意：决定定位的元素参照对象是最邻近的定位祖先元素，如果找不到这样的祖先元素，参考对象是视口
- 使用flex布局实现水平、垂直居中弊端：
- 当前flex局部中(flex布局的盒子里)的所有元素都会被垂直居中
- 相对来说兼容性差一点点(IE9不支持)，不过现在大多数都兼容(基本可以忽略)
