AI 助理
备案控制台登录注册
开发者社区 开发与运维 文章 正文

这一次，彻底搞懂垂直水平居中

2021-11-17 174
版权
举报
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 这一次，彻底搞懂垂直水平居中

这是我参与11月更文挑战的第10天，活动详情查看：2021最后一次更文挑战

无论是在面试中还是在工作中，将一个元素置为水平或垂直居中，都是一个前端工程师必备的基本功，接下来让我们一起来对居中这个话题进行系统性的梳理和总结。

一、水平居中

行内元素

HTML结构

<div class="parent">
    <span class="child">111</span>
  </div>
复制代码

居中方法：给其父元素设置text-align: center;

text-align: center;
复制代码

块级元素

一般块元素

只需给该元素设置margin: 0 auto即可。

margin: 0 auto;
复制代码

子元素包含float的情况

可以给父元素设置宽度为：fit-content。

.parent {
    margin: 0 auto;
    width: fit-content;
}
.child {
    float: left
}
复制代码

flex布局实现水平居中

通过给父元素设置下面两个属性：

display: flex;
justify-content: center;
复制代码

绝对定位 + left + transform

给子元素设置下面的css样式。（注意：下面的translate是相对于自身进行移动的）

position: absolute;
left: 50%;
transform: translate(-50%,0);
复制代码

绝对定位 + left + margin-left

给子元素设置下面的CSS样式。

position: absolute;
left: 50%;
margin-left: calc(-0.5*100px);
复制代码

绝对定位 + left/right + margin

给父元素设置下面的CSS样式。

position: absolute;
left: 0;
right: 0;
margin: 0 auto;
复制代码

二、垂直居中

行内元素

单行文本

给子元素的行高设置为父元素的高度即可。

.parent {
  width: 200px;
  height: 200px;
  text-align: center;
  border: 1px solid red;
  margin: 0 auto;
}
.child {
  line-height: 200px;
  background-color: pink;
}
复制代码

将行高和高度均设置在父元素身上也是可行的。

.parent {
  width: 200px;
  height: 200px;
  line-height: 200px;
  border: 1px solid red;
}
复制代码

块级元素

行内块元素

可以给行内块元素，添加一个兄弟元素，将这个兄弟元素的高度设置和父元素高度一致，字体大小设置为0.

.parent {
  width: 400px;
  height: 400px;
  border: 1px solid red;
}
.child,.brother {
  display: inline-block;;
  vertical-align: middle;
}
.child {
  background: blue;
  font-size: 12px;
}
.brother {
  height: 400px;
  font-size: 0;
}
复制代码
<div class="parent">
    <div class="child">child</div>
    <div class="brother">brother</div>
  </div>
复制代码

flex布局

只需给父元素设置display:flex和align-items: center即可。

display: flex;
align-items: center;
复制代码

绝对定位 + left/top/right/bottom + margin: auto

子级绝对定位，父级相对定位，同时给自己的四个定位边置为0，然后设置为，margin: auto即可。

.parent {
  position: relative;
  width: 400px;
  height: 400px;
  border: 1px solid red;
}
.child {
  width: 200px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; 
  margin: auto;
  background: blue;
  font-size: 12px;
}
复制代码

table-cell + vertical-align

这种垂直居中方法只需给父元素设置display: table-cell,同时设置vertical-align：middle即可。

.parent {
  width: 400px;
  height: 400px;
  border: 1px solid red;
  display: table-cell;
  vertical-align: middle;
}
.child {
  width: 200px;
  height: 100px;
  background: blue;
}
复制代码

子绝对父相对 + margin偏移

这种定位，首先需要子绝父相，然后通过margin进行偏移，缺点是需要知道宽高才可以。

.parent {
  width: 400px;
  height: 400px;
  border: 1px solid red;
  position: relative;
}
.child {
  width: 200px;
  height: 100px;
  background: blue;
  position: absolute;
  top: 50%;
  margin-top: -50px;
}
复制代码

自绝对父相对 + transform

子元素设置绝对定位，父元素设置相对定位，然后通过transform进行平移偏移量。

.parent {
  width: 400px;
  height: 400px;
  border: 1px solid red;
  position: relative;
}
.child {
  width: 200px;
  height: 100px;
  background: blue;
  position: absolute;
  top: 50%;
  transform: translate(0,-50%);
}
复制代码

借助伪元素

给父元素内部设置before伪元素，这个伪元素的高度设置为100%，内容设置为空，并设置为行内块元素，然后设置行内垂直对齐。子元素也要设置为行内块元素，行内垂直对齐。

.parent {
  width: 400px;
  height: 400px;
  border: 1px solid red;
  text-align: center;
}
.child {
  width: 200px;
  height: 100px;
  background: blue;
  display: inline-block;
  vertical-align: middle;
}
.parent::before {
  height: 100%;
  content: '';
  display: inline-block;
  vertical-align: middle;
}
复制代码

三、垂直水平居中

不定宽高

注意：这里的不定宽高指的是子元素的宽高不知道，并不是父元素的不知道。

方式1：绝对定位 +  transform

  • HTML结构
<div class="parent">
    <div class="child">child</div>
  </div>
复制代码
  • CSS样式
<style>
    .parent {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      position: relative;
    }
    .child {
      position: absolute;
      background: yellow;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
    }
  </style>
复制代码

方式2：table-cell布局

  • HTML样式
<div class="parent">
    <div class="child">child</div>
  </div>
复制代码
  • css样式
<style>
    .parent {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      display: table-cell;
      text-align: center;
      vertical-align: middle;
    }
    .child {
      background: yellow;
      display: inline-block;
    }
  </style>
复制代码

方式3：flex布局

  • HTML样式
<div class="parent">
    <div class="child">child</div>
  </div>
复制代码
  • css样式
<style>
    .parent {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .child {
      background: yellow;
    }
  </style>
复制代码

方式4：flex + margin:auto

  • HTML样式
<div class="parent">
    <div class="child">child</div>
  </div>
复制代码
  • css样式
<style>
    .parent {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      display: flex;
    }
    .child {
      margin: auto;
      background: yellow;
    }
  </style>
复制代码

方式5：grid布局 + flex布局

  • HTML样式
<div class="parent">
    <div class="child">child</div>
  </div>
复制代码
  • css样式
<style>
    .parent {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      display: grid;
    }
    .child {
      background: yellow;
      align-self: center;
      justify-self: center;
    }
  </style>
复制代码

方式6：grid布局 + margin: auto

  • HTML样式
<div class="parent">
    <div class="child">child</div>
  </div>
复制代码
  • css样式
<style>
    .parent {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      display: grid;
    }
    .child {
      background: yellow;
      margin: auto
    }
  </style>
复制代码

定宽高

注意：这里的定宽高指的是子元素的宽高是已知的。

方式1：绝对定位 + 负margin值

  • HTML样式
<div class="parent">
    <div class="child">child</div>
  </div>
复制代码
  • CSS样式
<style>
    .parent {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      position: relative;
    }
    .child {
      background: yellow;
      position: absolute;
      width: 100px;
      height: 100px;
      left: 50%;
      top: 50%;
      margin-left: -50px;
      margin-top: -50px;
    }
  </style>
复制代码

方式2：绝对定位 + transform (定宽/不定宽 通用)

  • HTML样式
<div class="parent">
    <div class="child">child</div>
  </div>
复制代码
  • CSS样式
.parent {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  position: relative;
}
.child {
  background: yellow;
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
复制代码

方式3：绝对定位 + left/top/right/bottom + margin: auto

  • HTML样式
<div class="parent">
    <div class="child">child</div>
  </div>
复制代码
  • css样式
<style>
    .parent {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      position: relative;
    }
    .child {
      background: yellow;
      position: absolute;
      width: 100px;
      height: 100px;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }
  </style>
复制代码

方式4：flex布局（定宽高和不定宽高：通用）

  • HTML样式
<div class="parent">
    <div class="child">child</div>
  </div>
复制代码
  • CSS样式
.parent {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .child {
      background: yellow;
      width: 100px;
      height: 100px;
    }
复制代码

方式5：grid布局 + margin: auto（通用）

  • HTML样式
<div class="parent">
   <div class="child">child</div>
</div>
复制代码
  • CSS样式
.parent {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  display: grid;
}
.child {
  background: yellow;
  width: 100px;
  height: 100px;
  margin: auto;
}
复制代码

方式6：table-cell布局（通用）

  • HTML样式
<div class="parent">
    <div class="child">child</div>
  </div>
复制代码
  • CSS样式
.parent {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.child {
  background: yellow;
  width: 100px;
  height: 100px;
  display: inline-block;
}
复制代码

四、图片居中的方法

关于图片的垂直水平居中，可以参考上文提到的几种通用垂直水平居中的方法，原理是一样的。

  • 绝对定位 + transform
  • flex布局
  • grid布局 + margin: auto
  • table-cell布局

五、自适应垂直水平居中

  • 方式1：绝对定位 + left/top/right/bottom + margin: auto
  • 方式2：绝对定位 + transform
  • 方式3：flex布局
文章标签：
前端开发
答案命运
+关注
602文章
目录
打赏
0
0
0
0
6
分享
相关文章
程序员古德
|
Java API 开发者
Spring中@import注解终极揭秘
在Spring框架中，@Import注解可以用来引入一个或多个组件，这些组件通常是通过@Bean注解定义的，当使用@Import注解时，实际上是在告诉Spring：“除了当前配置类中的bean定义外，还想包含另一个配置类（或多个配置类）中定义的bean。”
程序员古德
178 1
Spring中@import注解终极揭秘
小周sir
|
9月前
|
存储 前端开发 JavaScript
前端开发中的状态管理概述与工具选择
【10月更文挑战第7天】前端开发中的状态管理概述与工具选择
小周sir
198 0
龙大吉
|
8月前
|
存储 数据挖掘 数据处理
巴别时代使用 Apache Paimon 构建 Streaming Lakehouse 的实践
随着数据湖技术的发展，企业纷纷探索其优化潜力。本文分享了巴别时代使用 Apache Paimon 构建 Streaming Lakehouse 的实践。Paimon 支持流式和批处理，提供高性能、统一的数据访问和流批一体的优势。通过示例代码和实践经验，展示了如何高效处理实时数据，解决了数据一致性和故障恢复等挑战。
龙大吉
222 61
阿里云云原生
|
Kubernetes 测试技术 数据库
详解微服务应用灰度发布最佳实践
相对于传统软件研发，微服务架构下典型的需求交付最大的区别在于有了能够小范围真实验证的机制，且交付单位较小，风险可控，灰度发布可以弥补线下测试的不足。本文从 DevOps 视角概述灰度发布实践，介绍如何将灰度发布与 DevOps 工作融合，快来了解吧~
阿里云云原生
32472 19
&amp;ACE&amp;
|
前端开发
让页面里的字体变清晰，变细用CSS怎么做？
让页面里的字体变清晰，变细用CSS怎么做？
&amp;ACE&amp;
329 2
坠入极夜的夏
|
Nacos Docker 容器
关于NACOS-1.4.0未授权访问和旁路身份验证安全漏洞及其复现
关于NACOS-1.4.0未授权访问和旁路身份验证安全漏洞及其复现
坠入极夜的夏
382 2
林太白
|
JSON JavaScript 关系型数据库
❤Nodejs 第十六章（Nodejs环境安装和依赖使用）
【4月更文挑战第16天】本文介绍了Node.js环境安装和项目搭建步骤。检查Node.js和npm版本安装核心依赖，如Express（Web应用框架）、MySQL库、CORS（解决跨域问题）、body-parser（解析POST数据）、express-jwt和jsonwebtoken（JWT验证）、multer（文件上传处理）、ws（WebSocket支持），以及可选的dotenv（管理环境变量）和ejs（模板引擎）。完整源码可在Gitee开源项目[nexusapi](https://gitee.com/lintaibai/nexusapi)中找到。
林太白
386 0
江帅帅
|
JavaScript 关系型数据库 Java
MyBatisPlus 最新版代码生成器（直接拿来就能用，包含自动生成 Vue 模版）
MyBatisPlus 最新版代码生成器（直接拿来就能用，包含自动生成 Vue 模版）
江帅帅
2443 0
夜郎king
|
数据库
使用Mybatis-Plus实现对象属性自动填充功能
使用Mybatis-Plus实现对象属性自动填充功能
夜郎king
732 0
阿里云大数据Al技术
|
JSON 自然语言处理 对象存储
通义千问开源模型在PAI灵骏的最佳实践
本文将展示如何基于阿里云PAI灵骏智算服务，在通义千问开源模型之上进行高效分布式继续预训练、指令微调、模型离线推理验证以及在线服务部署。
阿里云大数据Al技术
63905 7

热门文章

最新文章

  • 1
    Kubernetes Master节点 灾备恢复操作指南
    6440
  • 2
    Hive架构优点及使用场景
    8648
  • 3
    SpringMvc+Spring+MyBatis 基于注解整合
    9385
  • 4
    DBSCAN聚类算法原理及其实现
    8884
  • 5
    部署SharePoint 2013
    1
  • 6
    thinkphp-foreach
    693
  • 7
    日媒：索尼的品牌复兴路充满荆棘
    764
  • 8
    关于自定义控件设计时如何把属性写入aspx中的研究（上）
    561
  • 9
    从小学到高中，一个程序猿的独白
    808
  • 10
    File Type Icons – 免费扁平设计风格文件类型图标集
    1
  • 1
    《声音的变形记：Web Audio API的实时特效法则》
    26
  • 2
    《让地图“活”起来：D3.js交互式地理可视化全攻略》
    41
  • 3
    安装MySQL 5.7到红帽系RHEL8+系列上
    94
  • 4
    zk源码—4.会话的实现原理
    20
  • 5
    【Azure Container App】配置容器应用的缩放规则 Managed Identity 连接中国区 Azure Service Bus 问题
    18
  • 6
    数据分析都要会BI？No！不是所有企业都应该上BI
    95
  • 7
    数据中台是什么？一文讲清为什么要建设数据中台
    28
  • 8
    WEB端交互元件库：Axure设计师的高效利器
    31
  • 9
    什么是数据中台，一文读懂数据中台核心功能
    37
  • 10
    数据中台架构解析：湖仓一体的实战设计
    49

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    【案例实战】SpringBoot整合阿里云文件上传OSS
    目录
    AI助理
    登录插画

    登录以查看您的控制台资源

    管理云资源
    状态一览
    快捷访问
    快捷注册登录阿里云

    你好，我是AI助理

    可以解答问题、推荐解决方案等