第十五讲_css水平垂直居中的技巧

css水平垂直居中的技巧

  • [1. 水平垂直居中(场景一)](#1. 水平垂直居中(场景一))
  • [2. 水平垂直居中(场景二)](#2. 水平垂直居中(场景二))
  • [3. 水平垂直居中(场景三)](#3. 水平垂直居中(场景三))
  • [4. 水平垂直居中(场景四)](#4. 水平垂直居中(场景四))

1. 水平垂直居中(场景一)

条件 :一个固定大小的div,包含一个固定大小的div

效果 :让内部的div位于外部div水平垂直居中的位置,且内部的div文本水平垂直居中。

注意事项 :父元素的第一个子元素margin塌陷的问题。

html 复制代码
<html>
  <style>
    .outer {
      height: 500px;
      width: 500px;
      background-color: brown;
      margin: 0 auto;
      /* 解决margin塌塌陷问题 */
      overflow: hidden;
    }

    .inner {
      height: 100px;
      width: 100px;
      background-color: aqua;
      /* 设置该元素在父元素中水平居中 */
      margin: 0 auto;
      margin-top: 200px;
      /* 设置该元素中的文本水平居中 */
      text-align: center;
      /* 设置该元素中的文本垂直居中 */
      line-height: 100px;
    }
  </style>

  <div class="outer">
    <div class="inner">hello</div>
  </div>
</html>

2. 水平垂直居中(场景二)

条件 :一个固定大小的div,包含一个行内元素、行内块元素。

效果 :让内部的行内元素、行内块元素都位于外部div水平垂直居中的位置。

注意事项:基线的影响。

html 复制代码
<html>
  <style>
    .outer {
      height: 500px;
      width: 500px;
      background-color: brown;
      /* 设置内部文本或行内元素水平居中 */
      text-align: center;
      /* 设置内部文本或行内元素垂直居中 */
      line-height: 500px;
      /* 为了让其子元素正好垂直居中,没有偏差 */
      font-size: 0;
    }

    .inner {
      background-color: aqua;
      /* 行内元素的基线相对于该元素所在行的基线的垂直对齐 */
      vertical-align: middle;
      font-size: 20px;
    }

    img {
      height: 100px;
      width: 100px;
      vertical-align: middle;
    }
  </style>

  <div class="outer">
    <span class="inner">hello</span>
    <img
      src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
    />
  </div>
</html>

3. 水平垂直居中(场景三)

条件:一个伸缩容器。

效果:让伸缩项目在伸缩容器的水平垂直居中位置。

实现方式一:

html 复制代码
<html>
  <style>
    .div1 {
      width: 500px;
      height: 500px;
      background-color: blueviolet;
      /* 设置为伸缩容器 */
      display: flex;
      /* 主轴上居中对齐 */
      justify-content: center;
      /* 侧轴上居中对齐 */
      align-items: center;
    }
    .div2 {
      width: 200px;
      height: 200px;
      background-color: blue;
    }
  </style>

  <div class="div1">
    <div class="div2"></div>
  </div>
</html>

实现方式二:

html 复制代码
<html>
  <style>
    .outer {
      width: 500px;
      height: 500px;
      background-color: blueviolet;
      /* 设置为伸缩容器 */
      display: flex;
    }
    .inner {
      width: 200px;
      height: 200px;
      background-color: blue;
      /* 设置margin为auto,会让伸缩项目水平垂直居中 */
      margin: auto;
    }
  </style>

  <div class="outer">
    <div class="inner"></div>
  </div>
</html>

4. 水平垂直居中(场景四)

条件 :一个固定大小的div

效果 :让div在视口的水平垂直居中位置。

注意事项:视口的大小不固定。

html 复制代码
<html>
  <style>
    body {
      /* 设置body的高度为视口的高度 */
      height: 100vh;
      /* 设置为伸缩容器 */
      display: flex;
    }

    .div1 {
      width: 500px;
      height: 500px;
      background-color: brown;
      /* 垂直水平居中父元素 */
      margin: auto;
    }
  </style>

  <div class="div1"></div>
</html>

代码中vh单位,是相对于视口高度的百分比,更多长度单位介绍可以参考另一篇博文:长度单位介绍

ps:运行代码,无论怎么调整视口的大小,红色块始终位于视口的水平垂直居中的位置。

相关推荐
黄智勇6 分钟前
xlsx-handlebars 一个用于处理 XLSX 文件 Handlebars 模板的 Rust 库,支持多平台使
前端
brzhang1 小时前
为什么 OpenAI 不让 LLM 生成 UI?深度解析 OpenAI Apps SDK 背后的新一代交互范式
前端·后端·架构
brzhang2 小时前
OpenAI Apps SDK ,一个好的 App,不是让用户知道它该怎么用,而是让用户自然地知道自己在做什么。
前端·后端·架构
井柏然2 小时前
前端工程化—实战npm包深入理解 external 及实例唯一性
前端·javascript·前端工程化
IT_陈寒3 小时前
Redis 高性能缓存设计:7个核心优化策略让你的QPS提升300%
前端·人工智能·后端
井柏然3 小时前
从 npm 包实战深入理解 external 及实例唯一性
前端·javascript·前端工程化
羊锦磊4 小时前
[ vue 前端框架 ] 基本用法和vue.cli脚手架搭建
前端·vue.js·前端框架
brzhang4 小时前
高通把Arduino买了,你的“小破板”要变“AI核弹”了?
前端·后端·架构
她说..4 小时前
通过git拉取前端项目
java·前端·git·vscode·拉取代码
智能化咨询4 小时前
玩转ClaudeCode:通过Chrome DevTools MCP实现高级调试与反反爬策略
前端·chrome·chrome devtools