CSS 水平垂直居中的 N 种方式

水平垂直居中的 N 种方式"/>

CSS 水平垂直居中的 N 种方式

水平垂直居中

• 居中之前
• 水平垂直居中
• • 方法一：absolute + 负margin
  • 方法二：absolute + margin auto
  • 方法三：absolute + calc
  • 方法四：absolute + transform
  • 方法五：vertical-align
  • 方法六：table-cell
  • 方法七：flex
• 对比小结

居中之前

首先我们创建一对父子元素，并为其设置好颜色大小备用

<div class="content"><div class='incont'></div>
</div>

.content {width: 250px;height:250px;margin: 50px;padding: 25px;background-color: #81b0db;
}.incont {width: 50px;height: 50px;background: aquamarine;
}

水平垂直居中

我们需要实现的效果图如下：

方法一：absolute + 负margin

父级元素使用相对定位，子元素使用绝对定位，调整其相对于父元素的位置。要求是需要我们知道子元素的宽高。

.content {position: relative;
}.incont {position: absolute;top: 50%;left: 50%;margin-left: -25px;margin-top: -25px;
}

方法二：absolute + margin auto

先设置各个方向的距离都是0，再将margin设为auto

.content {position: relative;
}.incont {position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;
}

方法三：absolute + calc

这种方法的使用和方法一一样，只是这里使用计算属性表示出来，缺点也是需要知道子元素宽高：

.content {position: relative;
}.incont {position: absolute;top: calc(50% - 25px);left: calc(50% - 25px);
}

缺点：IE9 以上才支持。

方法四：absolute + transform

这里使用 transform 属性对子元素进行偏移，好处是不需要知道子元素的宽高，直接用百分比表示即可：

.content {position: relative;
}.incont {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}

缺点：IE9 以上才支持。

方法五：vertical-align

首先将子元素转为行内块元素，然后通过父级元素的 text-aline 属性将其水平居中，然后通过设置子元素的 vertical-align 属性将其垂直居中。

.content {background-color: #81b0db;text-align: center;line-height: 250px;/*和高度保持一致*/
}.incont {display: inline-block;vertical-align: middle;line-height: inherit;
}

下面列举了 vertical-align 属性的值，该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐：

方法六：table-cell

我们知道，table 元素默认垂直居中，而通过 css 可以将元素转为 table 类型，代码如下：

.content {text-align: center;display: table-cell;vertical-align: middle;
}.incont {display: inline-block;
}

vertical-align一般作用在内联元素上，主要用于内联元素间在垂直方向上的对齐。不过，vertical-align同样也可以作用于table-cell元素，目的是为了指定table-cell中的内容在垂直方向上相对于table-cell的对齐关系。

缺点：对于设置为display: table-cell的元素，对其设置margin无效。

方法七：flex

通过弹性布局，可以轻易的实现水平垂直居中，甚至都不需要操作子元素：

.content {display: flex;justify-content: center;/*水平居中*/align-items: center;/*垂直居中*/
}

justify-content 属性定义了项目在主轴上的对齐方式。
align-items 属性定义项目在次轴上如何对齐。

对比小结

• PC端有兼容性要求，宽高固定，推荐absolute + 负margin
• PC端有兼容要求，宽高不固定，推荐css-table
• PC端无兼容性要求，推荐flex
• 移动端推荐使用flex