HomeBlogTagsAbout
Published on

实现垂直水平都居中的方式

我们在项目中，一般实现垂直水平都居中有以下五种常用或者说常见的方式。

一、定宽高的元素在屏幕窗口水平垂直都居中

当下的大环境中，其实定宽高的元素已经很少用了，不管是在PC端还是在移动端，因为要考虑适配，但是很少用不代表不用，有一些场景还是会用到，比如一些提示框（纯展示提示语句或者引导语句）。

我们通过以下几点来达到让元素上下左右都居中的效果：

  1. 采用固定定位——fixed，使元素脱离文档流
  2. 然后调整元素的 top 值和 left 值都为 50%，这里的 50% 是以元素的上边框和左边框为基准的，即上边框离屏幕 50% 这样子。
  3. 结合 margin ，按照自身宽高的一半，再往上和左返回（即负数）即可
element {
    width: value;
    height: value;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -width/2 px;
    margin-top: -height/2 px;    
}

二、不定宽高的元素在屏幕窗口水平垂直都居中

除了上述中定宽高的元素之外，平常见到的就是不定宽高的元素了，这种元素宽高一般都是由里面的内容撑开的，那没有了具体宽高，我们要怎么使其水平垂直都居中呢？

CSS3 中提供了 translate 属性，我们可以结合固定定位来实现居中效果。

  1. 同样要给元素设置固定定位，使其脱离正常文档流

  2. 在水平和垂直方法给移动 50%

  3. 使用 translate 设置水平和垂直方法再回去 50%，这里解释一下，translate 的偏移是针对自身大小的，所以哪怕我们不设置元素的宽高，也是可以达到和上面例子中 margin 一样的效果

    其实这里的写法除了直接写 translate 之外，还可以结合 tranform 属性，不过最终还是得借助 translate ，提一嘴的原因只是扩下知识点

⚠️注意

有一种特殊情况，那就是图片这种自身包含尺寸的元素，我们需要借助元素在定位后的流体特性和 margin 就可以使其垂直水平都居中了。

当一个绝对/固定定位元素，在对立方向（也就是左右、上下）上同时设置定位数值的时候，流体特性就发生了。流体特性发生之后，元素的宽高会自适应与其有包含关系的

元素（即能限制定位元素的活动范围的元素）宽高。

而具有流体特性定位元素的 margin: auto 的填充规则和普通流体元素是一摸一样的：

  1. 如果一侧定值，一侧 auto，那么 auto 为剩余空间大小；
  2. 如果两侧均是 auto，则平分剩余空间;

所以这里就有了针对特殊场景的布局方式：

image {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

⚠️：这个写法对于自身不包含尺寸的元素，是不适用的

三、定宽高的子元素在父元素中水平垂直都居中

因为绝对定位的参照物和绝对定位必须是包含和被包含的关系，而且参照物本身必须得具有定位的属性，所以这里我们在父级使用 relative 相对定位，使得父元素成为子元素的定位参照物，这样就可以实现子元素在父元素内部达到水平垂直都居中的效果。

  1. 父元素设置为相对定位，如果要垂直居中，则必须有高度。
  2. 子元素设置绝对定位，移动值上和第一个方法一样
parentElement {
  position: relative;
  height: 100vh;
}

childElement {
  width: value;
  height: value;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -width/2 px;
  margin-top: -height/2 px;
}

四、不定宽高的子元素在父元素中水平垂直都居中

有两种方式，常用第一种：

  1. 相对 + 绝对 + translate
  2. 将父元素的 display 属性值修改为 table-cell，即直接把父元素转换为表格单元格的形式
/* 方法一 */
parentElement {
  position: relative;
  height: 100vh;
}

childElment {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* 方法二 */
parentElement {
  display: table-cell;
  width: 100vw;
  height: 100vh;
  text-align: center;
  vertical-align: middle;
}

五、万能居中大法

flex 布局（弹性布局）是现在布局中经常使用到的一种布局方式，我们可以通过在父级元素设置元素主轴和交叉轴的对齐方式来达到水平垂直居中对齐的效果。

parentElment {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}