CSS两种方法实现水平垂直居中

本文作者：Tianheng Ni 本文分类：前端开发浏览：1740
阅读时间：418字, 约1分钟

方法一：使用定位属性+transform

本方法通用，方便，推荐使用。

给您要水平垂直居中的元素添加以下css属性：

position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);

给body添加相对定位属性：

position: relative;

即可实现。本站登录页面既是使用本方法实现的。

若要更改位置，直接改translateX和translateY的属性值即可。

本方法更加方便，但是有时候会出bug。

给您要水平垂直居中的元素添加以下css代码即可：

display: flex;
justify-content: center;
align-items: center;

但是要调相对位置就比较麻烦了。

更加简单，通过一个小技巧即可实现：

margin: 0 auto;

如果是文字，推荐直接使用：

text-align: center;