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

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

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

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

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

  1. 采用固定定位------fixed,使元素脱离文档流
  2. 然后调整元素的 top 值和 left 值都为 50%,这里的 50% 是以元素的上边框和左边框为基准的,即上边框离屏幕 50% 这样子。
  3. 结合 margin ,按照自身宽高的一半,再往上和左返回(即负数)即可
css 复制代码
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,则平分剩余空间;

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

css 复制代码
image {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

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

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

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

  1. 父元素设置为相对定位,如果要垂直居中,则必须有高度。
  2. 子元素设置绝对定位,移动值上和第一个方法一样
css 复制代码
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,即直接把父元素转换为表格单元格的形式
css 复制代码
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 布局(弹性布局)是现在布局中经常使用到的一种布局方式,我们可以通过在父级元素设置元素主轴和交叉轴的对齐方式来达到水平垂直居中对齐的效果。

css 复制代码
parentElment {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}
相关推荐
我是小路路呀11 分钟前
vue开始时间小于结束时间,时间格式:年月日时分
前端·javascript·vue.js
虾球xz13 分钟前
游戏引擎学习第201天
前端·学习·游戏引擎
我自纵横202324 分钟前
JavaScript 中常见的鼠标事件及应用
前端·javascript·css·html·计算机外设·ecmascript
li_Michael_li25 分钟前
Vue 3 模板引用(Template Refs)详解与实战示例
前端·javascript·vue.js
excel28 分钟前
webpack 核心编译器 十五 节
前端
excel33 分钟前
webpack 核心编译器 十六 节
前端
雪落满地香3 小时前
css:圆角边框渐变色
前端·css
风无雨4 小时前
react antd 项目报错Warning: Each child in a list should have a unique “key“prop
前端·react.js·前端框架
人无远虑必有近忧!4 小时前
video标签播放mp4格式视频只有声音没有图像的问题
前端·video
无情白9 小时前
k8s运维面试总结(持续更新)
运维·面试·kubernetes