元素水平居中问题汇总

关于元素水平垂直居中问题：

---

行内元素水平垂直居中

水平居中：给父元素设置 text-align:center;
垂直居中：:
方法1：给父元素或子元素设置 line-height:父元素的height;
方法2：给父元素设置 display: table-cell;vertical-align: middle;

块级元素水平垂直居中

水平居中：

• 方法1：直接设置 margin:0 auto;
• 方法2：先设置相对定位 position: relative; 或者绝对定位 position: absolute;
  然后调整位置，使用 left: 50%;margin-left: -宽的一半;
  或者 left: 50%;transform: translateX(-50%);
  或者 left: calc(50% - 宽的一半);
• 方法3：给父元素设置伸缩盒布局 display: flex; ，并且设置 justify-content:center;

垂直居中：

• 方法1：先设置相对定位 position: relative; 或者绝对定位 position: absolute;
  然后调整位置，使用 top: 50%;margin-top: -高的一半;
  或者 top: 50%;transform: translateY(-50%);
  或者 top: calc(50% - 高的一半);
• 方法2：给父元素设置伸缩盒布局 display: flex; ，并且设置 align-items: center;
• 方法3：设置一个空的兄弟元素 width: 0;height: 100%;display: inline-block;vertical-align: middle;
  然后给元素本身设置 display: inline-block;vertical-align: middle;
  注意：vertical-align 属性只对行内元素有效，对块级元素无效
  margin:0 auto 对内联元素和内联块级元素无效