一篇文章理解CSS垂直布局方法

news2024/11/24 20:15:09

方法1:align-content: center

在 2024 年的 CSS 原生属性中允许使用 1 个 CSS 属性 align-content: center进行垂直居中。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .box {
      height: 100px; 
      width: 100%;
      border: 1px solid red;
      text-align: center;
    }
  </style>
  <body>
    <div class="box" style="align-content: center;">
      <code>align-content</code> 垂直居中!
    </div>
  </body>
</html>
实现效果:

方法2:表格单元格

有 4 种主要布局:流(默认)、表格、flexbox、grid。如何对齐取决于容器的布局。Flexbox 和 grid 相对较晚添加,所以表格是第一种方式。

<div class="box" style="display: table;">
    <div style="display: table-cell; vertical-align: middle;">
        内容。
    </div>
</div>

方法3:绝对定位

通过绝对定位间接的方式来实现这个效果。

<div class="box" style="position: relative;">
  <div style="position: absolute; top: 50%; transform: translateY(-50%);">
    内容。
  </div>
</div>

这个方式通过绝对定位来绕过流式布局:

  • position: relative 标记参考容器。

  • position: absolute; top: 50% 将内容的边缘放置在中心。

  • transform: translateY(-50%) 将内容中心偏移到边缘。

方法4:内联内容

虽然流布局对内容对齐没有帮助。它允许在一行内进行垂直对齐。那么可以让行的高度和容器一样高。

<div class="container">
  ::before
  <div class="content">内容。</div>
</div>
​
.container::before {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
.content {
  display: inline-block;
  vertical-align: middle;
}

这个方式有一个缺陷,需要额外创建一个伪元素。

方法5:单行 flexbox

现在布局中的 Flexbox 变得广泛可用。它有两种模式:单行和多行。在单行模式(默认)中,行填充垂直空间,align-items 对齐行内的内容

<div style="display: flex; align-items: center;">
  <div>内容。</div>
</div>

或者调整行为列,并用 justify-content 对齐内容。

<div style="display: flex; flex-flow: column; justify-content: center;">
  <div>内容。</div>
</div>

方法6:多行 flexbox

在多行 flexbox 中,行不再填充垂直空间,所以行(只有一个项目)可以用 align-content 对齐。

<div style="display: flex; flex-flow: row wrap; align-content: center;">
  <div>内容。</div>
</div>

方法7:grid

Grid 出来的更晚,对齐变得更简单。

<div style="display: grid; align-content: center;">
  <div>内容。</div>
</div>

方法8:grid 单元格

注意与前一个方法的微妙区别:

  • align-content 将单元格居中到容器。

  • align-items 将内容居中到单元格,同时单元格拉伸以适应容器。

<div style="display: grid; align-items: center;">
  <div>内容。</div>
</div>

方法9:margin:auto

在流布局中,margin:auto 可以水平居中,但不是垂直居中。使用 margin-block: auto 可以设置垂直居中。

<div style="display: grid;">
  <div style="margin-block: auto;">
    内容。
  </div>
</div>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2228904.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

《鸿蒙生态:机遇与挑战并行,创新引领未来》

《鸿蒙生态&#xff1a;机遇与挑战并行&#xff0c;创新引领未来》 一、鸿蒙生态崛起&#xff1a;机遇涌现&#xff08;一&#xff09;技术创新引领潮流&#xff08;二&#xff09;市场潜力巨大 二、抓住机遇的策略&#xff08;一&#xff09;开发者的黄金时代&#xff08;二&a…

Fakelocation 步道乐跑(Root真机篇)

前言:需要 Fakelocation&#xff0c;真机Root,步道乐跑&#xff0c;Dia&#xff0c;MT管理器系统需求 Fakelocation | MT管理器 | Dia | 环境模块 任务一 真机Root&#xff08;德尔塔&#xff0c;过momo&#xff0c;刷环境模块&#xff09; 任务二 前往Dia查看包名&#xff08…

docker离线安装达梦数据库

文章目录 下载达梦数据库docker镜像上传DM8镜像文件将DM8镜像导入到本地docker镜像仓库中查看本地docker镜像仓库是否存在DM8镜像带参数启动DM8docker启动DM8默认用户名/密码 下载达梦数据库docker镜像 达梦数据库官网 https://www.dameng.com/ 点击下载中心&#xff0c;选择D…

SD教程 ControlNet之OpenPose

ControlNet 是神经网络结构&#xff0c;用于控制预训练的大型扩散模型&#xff0c;以支持额外的输入条件。ControlNet 以端到端的方式学习任务特定的条件&#xff0c;即使训练数据集很小&#xff08;< 50k&#xff09;&#xff0c;学习也是稳健的。此外&#xff0c;训练一个…

HarmonyOS:自定义组件冻结功能

一、简介 自定义组件冻结功能专为优化复杂UI页面的性能而设计&#xff0c;尤其适用于包含多个页面栈、长列表或宫格布局的场景。在这些情况下&#xff0c;当状态变量绑定了多个UI组件&#xff0c;其变化可能触发大量UI组件的刷新&#xff0c;进而导致界面卡顿和响应延迟。为了提…

智慧工地:标准化、信息化、数字化与智能化的融合与实践

智慧工地&#xff0c;作为智慧地球理念在工程领域的具体实践&#xff0c;代表了一种全新的工程全生命周期管理方式。 智慧工地是建筑行业数字化转型的重要方向&#xff0c;它通过应用物联网、大数据、云计算、人工智能等新兴技术&#xff0c;对建筑工地进行数字化、信息化、智…

网络编程 TCP编程 Linux环境 C语言实现

所有基于数据传输通信的程序&#xff0c;都会被分成两种角色&#xff1a; 1. 服务端&#xff1a;又称为服务器 server 提供一种通信服务的进程 基本工作过程是&#xff1a;1> 接收请求数据 2> 处理请求数据 3> 发送处理结果 2. 客户端&#xff1a;client 使用一种通…

Docker 安装HomeAssistant智能家居系统

HomeAssistant 介绍 简介 Home Assistant是一个自由开源的智能家居自动化平台&#xff0c;它可以控制并监测各种智能家居设备、传感器和其他物联网设备。Home Assistant可以运行在树莓派、NVIDIA Jetson Nano等低功耗设备上&#xff0c;使用户可以快速搭建自己的智能家居系统。…

vim的使用方法

常见的命令可参考&#xff1a; Linux vi/vim | 菜鸟教程​www.runoob.com/linux/linux-vim.html​编辑https://link.zhihu.com/?targethttps%3A//www.runoob.com/linux/linux-vim.html 1. vim的工作模式 vi/vim 共分为三种模式&#xff0c;命令模式、编辑输入模式和末行&am…

java jsoup解析豆瓣电影数据html实战教程

什么是Jsoup Jsoup 是一个开源 Java 库&#xff0c;它提供了一个直观的 API&#xff0c;可使用 DOM API 方法获取 URL 并提取和处理数据。 作为一个多功能库&#xff0c;Jsoup 支持 CSS 选择器和 XPath&#xff0c;它们是识别和选择 HTML 文档中元素的强大选项。 此外&#xf…

CSS 复习

复杂选择器可以通过&#xff08;id的个数&#xff0c;class的个数&#xff0c;标签的个数&#xff09;的形式&#xff0c;计算权重。 如果我们需要将某个选择器的某条属性提升权重&#xff0c;可以在属性后面写!important&#xff1b;注意!importent要写在;前面 很多公司不允许…

计算机毕业设计django+大模型租房推荐系统 租房可视化 租房大屏可视化 租房爬虫 spark 58同城租房爬虫 房源推荐系统

开题报告&#xff1a;《Django大模型租房推荐系统》 一、研究背景与意义 随着城市化进程的加快&#xff0c;房屋租赁市场日益繁荣。然而&#xff0c;传统的房屋租赁方式存在信息不对称、交易流程繁琐等问题&#xff0c;给租户和房主带来了诸多不便。因此&#xff0c;开发一套…

LLM之RAG实战(四十七)| GraphRAG:使用知识图谱改进 RAG 检索策略

在 Retrieval Augmented Generation &#xff08;RAG&#xff09; 技术中&#xff0c;检索是直接影响生成输出质量的关键步骤。然而&#xff0c;基础 RAG 中的向量检索技术通常不足以满足所有情况。例如&#xff0c;传统的检索方法在处理大型私有文档存储库时往往表现不佳。许多…

希亦内衣洗衣机Pro:18项核心数据硬核黑科技,爆发10倍洁净力!

随着人们卫生意识越来越强&#xff0c;小型洗衣机成为热门家电&#xff0c;尤其是对于女士和有婴儿的家庭。近日&#xff0c;洗护领域的佼佼者希亦正式推出了最新款的内衣洗衣机——希亦ACE Pro&#xff0c;为追求精致生活的人们&#xff0c;带来了新的选择&#xff0c;能提供更…

零基础学西班牙语,柯桥专业小语种培训泓畅学校

No te comas el coco, seguro que te ha salido bien la entrevista. Ya te llamarn. 别瞎想了&#xff01;我保证你的面试很顺利。他们会给你打电话的。 这里的椰子是"头"的比喻。在西班牙的口语中&#xff0c;我们也可以听到其他同义表达&#xff0c;比如&#x…

【python】OpenCV—WaterShed Algorithm

文章目录 1、功能描述2、代码实现3、完整代码4、效果展示5、涉及到的库函数5.1、cv2.pyrMeanShiftFiltering5.2、cv2.morphologyEx5.3、cv2.distanceTransform5.4、cv2.normalize5.5、cv2.watershed 6、更多例子7、参考 1、功能描述 基于分水岭算法对图片进行分割 分水岭分割…

微服务设计模式 - 特性标志(Feature Flags)

微服务设计模式 - 特性标志&#xff08;Feature Flags&#xff09; 定义 特性标志&#xff08;Feature Flags&#xff09;&#xff0c;又称特性开关&#xff08;Feature Toggles&#xff09;&#xff0c;是一种常见的云计算设计模式&#xff0c;允许开发人员通过配置动态地打开…

WebStorm EsLint报红色波浪线

如图左侧。 这个错误是由于 ESLint 和 Prettier 的配置不一致导致的。它建议你移除多余的空格。以下是一些解决方法&#xff1a; 安装 Prettier 插件&#xff1a; 确保你在 WebStorm 中安装了 Prettier 插件&#xff0c;并确保它配置正确。 调整 ESLint 配置&#xff1a; 检查…

四、k8s快速入门之Kubernetes资源清单

kubernetes中的资源 ⭐️ k8s中所有的内容都抽象为资源&#xff0c;资源实列化之后&#xff0c;叫做对象 1️⃣名称空间级别 ⭐️ kubeadm在执行k8s的pod的时候会在kube-system这个名称空间下执行&#xff0c;所以说当你kubectl get pod 的时候是查看不到的查看的是默认的po…

数据库->数据库约束

目录 一、数据库约束 1.定义 2.约束类型 3.NOT NULL 非空约束 4. UNIQUE 唯一约束 5.PRIMARY KEY 主键约束 1.主键的使用 2.把表中的主键交给数据库自己维护 2.1主键列设置为null 则使用自增 2.2插入除了主键以外的所有非空列&#xff08;推荐方法&#xff09; 2.3自…