CSS【详解】居中对齐 （水平居中 vs 垂直居中）

水平居中

内部块级元素的宽度要小于容器(父元素)

方案一：文本居中对齐（内联元素）

限制条件：仅用于内联元素 display:inline 和 display: inline-block;

给容器添加样式

text-align: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>
    <style>
      .box {
        margin: 30px 30px 0px 300px;
        border: 1px solid gray;
        text-align: center;
      }
      .item {
        display: inline-block;
        width: 400px;
        background: yellow;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span>水平居中 -- display: inline</span>
    </div>
    <div class="box">
      <div class="item">水平居中 -- display: inline-block</div>
    </div>
  </body>
</html>

方案二：自动外边距（块级元素）

限制条件：仅用于块级元素 display:block;

给内部元素添加样式

margin: auto

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        margin: 30px;
        border: 1px solid gray;
      }
      .item {
        margin: auto;
        width: 300px;
        background: yellow;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="item">水平居中 -- 块级元素 display:block</div>
    </div>
  </body>
</html>

方案三：flex布局【推荐】

给容器添加样式

display: flex;
justify-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>
    <style>
      .box {
        margin: 30px 30px 0px 300px;
        border: 1px solid gray;
        display: flex;
        justify-content: center;
      }
      .item {
        width: 400px;
        background: yellow;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span>水平居中 -- flex布局 display: inline</span>
    </div>
    <div class="box">
      <div class="item">水平居中 -- flex布局 display: block</div>
    </div>
  </body>
</html>

方案四：子绝父相 + transform （CSS3）

限制条件：浏览器需支持CSS3，比较老的浏览器不适用
给容器（父元素）添加样式

position: relative

给内部元素添加样式

position: absolute;
left: 50%;
transform: translate(-50%, 0);

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        margin: 30px 30px 0px 300px;
        border: 1px solid gray;
        height: 50px;
        position: relative;
      }
      .item {
        background-color: yellow;
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span class="item">水平居中 -- 子绝父相 + transform</span>
    </div>
  </body>
</html>

方案五：子绝父相 + 自动外边距 （指定宽度）

限制条件：内部元素需限定宽度

给容器（父元素）添加样式

position: relative

给内部元素添加样式

position: absolute;
left: 0;
right: 0;
margin: auto;

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        margin: 30px 30px 0px 300px;
        border: 1px solid gray;
        height: 50px;
        position: relative;
      }
      .item {
        background-color: yellow;
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        width: 300px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span class="item">水平居中 -- 子绝父相 + 自动外边距</span>
    </div>
  </body>
</html>

方案六：子绝父相 + 负外边距 （知道宽度 + 宽度计算）

限制条件：需知道内部元素的宽度（无法预知宽度的内联元素和未知宽度的块级元素都不适用）

给容器（父元素）添加样式

position: relative

给内部元素添加样式

position: absolute;
left:50%;
margin-left:-内部元素宽度的一半

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        margin: 30px;
        border: 1px solid gray;
        height: 100px;
        position: relative;
      }
      .item {
        width: 400px;
        background: yellow;
        position: absolute;
        left: 50%;
        margin-left: -200px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="item">水平居中 -- 绝对定位元素 position:absolute</div>
    </div>
  </body>
</html>

垂直居中

内部块级元素的高度要小于容器(父元素)

方案一：行高 = 容器高度（单行内联元素）

限制条件：仅用于单行内联元素 display:inline 和 display: inline-block;

给容器添加样式

 height: 100px;
 line-height: 100px;

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        margin: 30px;
        border: 1px solid gray;
        height: 100px;
        line-height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span class="item">垂直居中 -- 内联元素 display:inline</span>
    </div>
  </body>
</html>

方案二：flex布局【推荐】

给容器添加样式

display: flex;
align-items: center;

方案三：子绝父相 + transform（CSS3）

限制条件：浏览器需支持CSS3，比较老的浏览器不适用
给容器（父元素）添加样式

position: relative

给内部元素添加样式

position: absolute;
top: 50%;
transform: translate(0, -50%);

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        margin: 30px;
        border: 1px solid gray;
        height: 100px;
        position: relative;
      }

      .item {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="item">垂直居中 -- 子绝父相 transform</div>
    </div>
  </body>
</html>

方案四：子绝父相 + 自动外边距（指定高度）

限制条件：内部元素需限定高度

给容器（父元素）添加样式

position: relative

给内部元素添加样式

position: absolute;
top: 0;
bottom: 0;
margin: auto;
  • 内联元素也有效，因为内联元素绝对定位后，display 会变为 block

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        margin: 30px;
        border: 1px solid gray;
        height: 100px;
        position: relative;
      }

      .item {
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        background-color: yellow;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span class="item">垂直居中 -- 子绝父相 + 自动外边距</span>
    </div>
  </body>
</html>

方案五：子绝父相 + 负外边距 （知道高度 + 高度计算）

限制条件：需知道内部元素的高度

给容器（父元素）添加样式

position: relative

给内部元素添加样式

position: absolute;
top: 50%;
margin-top: -内部元素高度的一半;

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        margin: 30px;
        border: 1px solid gray;
        height: 100px;
        position: relative;
      }

      .item {
        position: absolute;
        top: 50%;
        margin-top: -25px;
        height: 50px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span class="item">垂直居中 -- 子绝父相 + 负外边距</span>
    </div>
  </body>
</html>

水平垂直居中

参考上文分别实现水平居中和垂直居中即可，常用方案如下：

方案一：flex布局【推荐】

给容器添加样式

display: flex;
justify-content: center;
align-items: center;

方案二：子绝父相 + transform （CSS3）

限制条件：浏览器需支持CSS3，比较老的浏览器不适用
给容器（父元素）添加样式

position: relative

给内部元素添加样式

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

方案三：子绝父相 + 自动外边距（指定高度和宽度）

给容器（父元素）添加样式

position: relative

给内部元素添加样式

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

方案四：子绝父相 + 负外边距 （知道宽度和高度 + 宽度和高度计算）

限制条件：需知道内部元素的宽度和高度
给容器（父元素）添加样式

position: relative

给内部元素添加样式

position: absolute;
left:50%;
margin-left:-内部元素宽度的一半;
top: 50%;
margin-top: -内部元素高度的一半;

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        margin: 30px 30px 0px 300px;
        border: 1px solid gray;
        height: 100px;
        position: relative;
      }
      .item {
        background-color: yellow;
        position: absolute;
        left: 50%;
        margin-left: -150px;
        top: 50%;
        margin-top: -25px;
        width: 300px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span class="item">水平垂直居中 -- 子绝父相 + 负外边距</span>
    </div>
  </body>
</html>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

微软为金融界带来革命性突破——推出Microsoft 365中的下一代AI助手：Microsoft Copilot for Finance

微软为金融界带来革命性突破——推出Microsoft 365中的下一代AI助手：Microsoft Copilot for Finance

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…
阅读更多...
阿里云搭建私有docker仓库（学习）

阿里云搭建私有docker仓库（学习）

搭建私有云仓库 首先登录后直接在页面搜索栏中搜索“容器镜像服务” 进入后直接选择个人版&#xff08;可以免费使用&#xff09; 选择镜像仓库后创建一个镜像仓库 在创建仓库之前我们先创建一个命名空间 然后可以再创建我们的仓库&#xff0c;可以与我们的github账号进行关联…
阅读更多...
云原生架构技术揭秘：DevOps 技术打破开发运维壁垒，实现持续交付的变革之道

云原生架构技术揭秘：DevOps 技术打破开发运维壁垒，实现持续交付的变革之道

DevOps 是一套将软件开发&#xff08;Development&#xff0c;Dev&#xff09;和系统运维&#xff08;Operations&#xff0c;Ops&#xff09;相结合的实践&#xff0c;旨在缩短应用系统开发生命周期&#xff0c;提供高质量的持续交付。 —— 维基百科 DevOps 0、讲在前面 生…
阅读更多...
鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：显隐控制）

鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：显隐控制）

控制组件是否可见。 说明&#xff1a; 从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 visibility visibility(value: Visibility) 控制组件的显隐。 卡片能力&#xff1a; 从API version 9开始&#xff0c;该接口支持在…
阅读更多...
BP 神经网络原理

BP 神经网络原理

BP (Back Propagation) 神经网络是1986年由 Rumelhart 和 McClelland 为首的科学家提出的概念&#xff0c;是一种按照误差逆向传播算法训练的多层前馈神经网络&#xff0c;是应用最广泛的神经网络。 1 BP 神经网络的结构和传播规则 BP神经网络由 输入层、隐含层&#xff08;也…
阅读更多...
Revit-二开之立面视图创建FilledRegion-(3)

Revit-二开之立面视图创建FilledRegion-(3)

在上一篇博客中介绍了FilledRegion的创建方法，这种方法通常只在平面视图中适用，在三维视图中也是无法创建的（目前研究的是这样的，如果有其他方法，请赐教）。 本片文章介绍一个下在立面视图中创建FilledRegion的方法，主要操作是在立面视图中拾取一个点，然后以该点为原点，…
阅读更多...
javaweb day9 day10

javaweb day9 day10

昨天序号标错了 vue的组件库Elent 快速入门 写法 常见组件 复制粘贴 打包部署
阅读更多...
PYTHON 自动化办公：压缩图片（PIL）

PYTHON 自动化办公：压缩图片（PIL）

1、介绍 在办公还是学习过程中&#xff0c;难免会遇到上传照片的问题。然而照片的大小限制一直都是个问题&#xff0c;例如照片限制在200Kb之内&#xff0c;虽然有很多图像压缩技术可以实现&#xff0c;但从图像处理的专业来说&#xff0c;可以利用代码实现 这里使用的库函数是…
阅读更多...
【Redis知识点总结】（一）——各种数据结构及其应用场景

【Redis知识点总结】（一）——各种数据结构及其应用场景

Redis知识点总结&#xff08;一&#xff09;——基础数据类型及其应用场景 基础数据类型基础数据类介绍底层数据结构SDS&#xff08;简单动态字符串&#xff09;list&#xff08;双向链表&#xff09;ziplist&#xff08;压缩列表&#xff09;quicklist&#xff08;快速表&…
阅读更多...
Unity3D学习之Lua热更新解决方案（二）XLua

Unity3D学习之Lua热更新解决方案（二）XLua

文章目录 1 XLua概述2 xLua导入和AB包相关准备3 C#调用Lua3.1 Lua解析器3.2 文件加载重定向3.3 Lua解析器管理器3.3.1 重定向AB包内的Lua3.3.2 获得_G大表 3.4 全局变量的获取3.5 全局函数的获取3.5.1 无参无返回3.5.2 有参有返回3.5.3 多返回值3.5.4 变长参数 3.6 List和Dicti…
阅读更多...
策略模式 详解 设计模式

策略模式 详解 设计模式

策略模式 策略模式是一种行为型设计模式&#xff0c;它定义了一系列算法&#xff0c;将每个算法封装到具有共同接口的独立类中&#xff0c;并且使它们可以相互替换。 策略模式可以让算法的变化独立于使用算法的客户端。 主要解决&#xff1a; 在有多种算法相似的情况下&#…
阅读更多...
Linux系统管理：虚拟机 Kali Linux 安装

Linux系统管理：虚拟机 Kali Linux 安装

目录 一、理论 1.Kali Linux 二、实验 1.虚拟机Kali Linux安装准备阶段 2.安装Kali Linux 2. Kali Linux 更换国内源 3. Kali Linux 设置固定IP 4. Kali Linux 开启SSH远程连接 5. MobaXterm远程连接 Kali Linux 三、问题 1.apt 命令 取代哪些 apt-get命令 一、理论…
阅读更多...
Linux文本处理三剑客：awk

Linux文本处理三剑客：awk

在Linux操作系统中&#xff0c;grep、sed、awk被称为文本操作“三剑客”&#xff0c;上两期中&#xff0c;我们将详细介绍grep、sed的基本使用方法&#xff0c;希望能够帮助到有需要的朋友&#xff0c;现在&#xff0c;我们继续学习awk。 虽然awk是一个Linux中常见的命令&…
阅读更多...
C 嵌入式系统设计模式 17：静态优先级模式

C 嵌入式系统设计模式 17：静态优先级模式

本书的原著为&#xff1a;《Design Patterns for Embedded Systems in C ——An Embedded Software Engineering Toolkit 》&#xff0c;讲解的是嵌入式系统设计模式&#xff0c;是一本不可多得的好书。 本系列描述我对书中内容的理解。本文章描述嵌入式并发和资源管理模式之三…
阅读更多...
Slicer学习笔记（六十五） 3DSlicer的医学图像数据增强扩展模块

Slicer学习笔记（六十五） 3DSlicer的医学图像数据增强扩展模块

1. 医学图像数据增强扩展模块 基于3D Slicer5.1.0 编写了一个测试医学图像的数据增强测试扩展模块。 扩展模块名&#xff1a;DataAugementation 项目地址&#xff1a;DataAugmentation 下载该项目后&#xff0c;可以将该扩展模块添加到3D Slicer的扩展中。 关于如何给3DSlicer…
阅读更多...
【STA】多场景时序检查学习记录

【STA】多场景时序检查学习记录

单周期路径 建立时间时序检查 在时钟的有效沿到达触发器之前&#xff0c;数据应在一定时间内保持稳定&#xff0c;这段时间即触发器的建立 时间。满足建立时间要求将确保数据可靠地被捕获到触发器中。 建立时间检查是从发起触发器中时钟的第一个有效沿到捕获触发器中时钟后面…
阅读更多...
萌新学习RSA第一天

萌新学习RSA第一天

文章来自NSSCTF工坊Xenny的课程 1.非对称加密 2.介绍RSA来源&#xff08;三位数学家名字开头&#xff09; 3.RSA数学基础 4.算法实现 from Crypto.Util.number import * #这个是关于RSA很多函数的库 p getPrime(512) #111RSA第一步&#xff1a;生成随机的51…
阅读更多...
Sora学习（一）：Sora技术路径整体认知

Sora学习（一）：Sora技术路径整体认知

前文&#xff1a;最近跟着DataWhale组队学习这一期“Sora原理与技术实战”&#xff0c;本篇博客主要是基于DataWhale成员、厦门大学平潭研究院杨知铮研究员分享的Sora技术原理详解课件内容以及参考网上一些博客资料整理而来&#xff08;详见文末参考文献&#xff09;&#xff0…
阅读更多...
鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：禁用控制）

鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：禁用控制）

组件是否可交互&#xff0c;可交互状态下响应点击事件、触摸事件、拖拽事件、按键事件、焦点事件和鼠标事件。 说明&#xff1a; 从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 enabled enabled(value: boolean) 设置组…
阅读更多...
持续集成（CICD）- Git版本管理工具，Gitee线上仓库

持续集成（CICD）- Git版本管理工具，Gitee线上仓库

文章目录 一、学习目标：二、什么是Git工具三 、Git环境搭建（windows系统）四、Gitee设置（私钥和公钥绑定）五、Git结合Gittee进行基本设置（重要）六、在Gitee上新建仓库私有仓库(非空仓库）七、Git拉取线上仓库代码，提交代码（重要）八、Git解决版本冲突问题（重要）场景一…
阅读更多...
最新文章

Copyright @ 2022~2023