CSS关于居中的问题

文章目录

  • 1. 行内和块级元素自身相对父控件居中
    • 1.1. 块级元素相对父控件居中
    • 1.2. 行内元素相对于父控件居中
  • 2. 实现单行文字垂直居中
  • 3. 子绝父相实现子元素的水平垂直居中
    • 3.1. 方案一
      • 3.1.1. 示例
    • 3.2. 方案二
      • 3.2.1. 示例
    • 3.3. 方案三(推荐)
      • 3.3.1. 示例
    • 3.4. 方案四(了解一下)
  • 4. flex 实现水平垂直居中
    • 4.1. 方法一
    • 4.2. 方法二

1. 行内和块级元素自身相对父控件居中

给行内和块级元素设置宽高,出现的现象:

  • 设置宽高对行内元素没有效果
  • 设置宽度对块级元素有效果
span {
  width: 100px;
  height: 100px;
  text-align: center;
  background-color: skyblue;
}
div {
  width: 100px;
  height: 100px;
  background-color: pink;
}

image-20240309142431457

原因是因为行内元素的宽高是由内容决定的。

1.1. 块级元素相对父控件居中

只能通过盒子模型的外边距实现,这个属性写在元素本身上面。

div {
  width: 100px;
  height: 100px;
  background-color: pink;
  margin: 0 auto;
}

image-20240309142720538

如果是没有设置宽高的话,可以通过父控件的text-align实现,但是不能用margin: 0 auto实现。

1.2. 行内元素相对于父控件居中

只能通过父控件的text-align实现。

body {
  text-align: center;
}
span {
  width: 100px;
  height: 100px;
  background-color: skyblue;
}

image-20240309142928395

2. 实现单行文字垂直居中

对于单行文字:可以实现文字垂直居中(height 等于 line-height)。

image-20240309144235356

div {
  width: 300px;
  height: 300px;
  background-color: pink;
  line-height: 300px;
}
<div>我是单行文字</div>

由于字体设计原因,靠上述办法实现的居中,并不是绝对的垂直居中,但如果一行中都是文字,不会太影响观感。

3. 子绝父相实现子元素的水平垂直居中

前提:定位的元素必须设置宽和高!!!

这里我们创建父元素和子元素,并设置样式。

.father {
  width: 600px;
  height: 600px;
  background: pink;
}
.son {
  width: 300px;
  height: 300px;
  background: #95a299;
}

image-20240310184506760

3.1. 方案一

直接计算移动的需要距离。

left: 父子元素高度差的一半;
top: 父子元素宽度差的一半;

3.1.1. 示例

子元素 y 轴移动的距离是父子元素高度差的一半,

子元素 x 轴移动的距离是父子元素宽度差的一半。

.father {
  width: 600px;
  height: 600px;
  background: pink;
  position: relative;
}

.son {
  width: 300px;
  height: 300px;
  background: #95a299;
  position: absolute;
  top: 150px;
  left: 150px;
}

弊端:偏移值lefttop是写死的,如果父元素的宽度发生改变,子元素就无法水平居中了。

3.2. 方案二

这里的lefttop我们可以用百分比来表示,子元素相对父元素移动 50%的距离后,再根据子元素的外边距进行调整。

left: 50%;
top: 50%;
margin-left: 自身宽度的一半;
margin-top: 自身高度的一半;

3.2.1. 示例

.son {
  width: 300px;
  height: 300px;
  background: #95a299;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -150px; /* 向左移动自身宽度的一半 */
  margin-top: -150px; /* 向上移动自身宽度的一半 */
}

弊端:由于margin-leftmargin-top值是写死的,如果 son 的宽度发生改变,子元素也无法水平居中。

3.3. 方案三(推荐)

子元素相对父元素移动 50%的距离后,使用transform调整子元素的位置。

3.3.1. 示例

width: 300px;
height: 300px;
background: #95a299;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

优势:不用计算调整子元素移动移动的距离,用百分比表示即可。

3.4. 方案四(了解一下)

子绝父相,子元素设置以下属性,也能进行水平垂直居中。

简单理解:四个方向有相同的力在拉这个盒子,margin:auto是让这个盒子的位置保持中立,来达到盒子处于正中心。

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

4. flex 实现水平垂直居中

4.1. 方法一

父元素开启 flex 布局,随后使用 justify-contentalign-items 实现水平垂直居中。

display: flex;
/* 设置子元素水平居中 */
justify-content: center;
/* 设置子元素垂直居中 */
align-items: center;
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>12-flex布局-实现子元素水平垂直居中</title>
    <style>
      .father {
        background: pink;
        height: 300px;
        display: flex;
        /* 设置子元素水平居中 */
        justify-content: center;
        /* 设置子元素垂直居中 */
        align-items: center;
      }
      .son {
        width: 100px;
        height: 100px;
        background: #a5ccaf;
      }
    </style>
  </head>
  <body>
    <div class="father">
      <div class="son"></div>
    </div>
  </body>
</html>

4.2. 方法二

父容器开启 flex 布局,随后子元素 margin: auto

.father {
  background: pink;
  height: 300px;
  display: flex;
}
.son {
  width: 100px;
  height: 100px;
  background: #a5ccaf;
  margin: auto;
}

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

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

相关文章

高盛开源的量化金融 Python 库

GS Quant GS Quant是用于量化金融的Python工具包&#xff0c;建立在世界上最强大的风险转移平台之一之上。旨在加速量化交易策略和风险管理解决方案的开发&#xff0c;凭借25年的全球市场经验精心打造。 它由高盛的定量开发人员&#xff08;定量&#xff09;创建和维护&#…

2970.力扣每日一题7/10 Java(暴力枚举)

博客主页&#xff1a;音符犹如代码系列专栏&#xff1a;算法练习关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ 目录 解题思路 解题方法 时间复杂度 空间复杂度 Code 解题思路 incre…

对智能的研究正在悄悄地诱发复杂取代科学

随着智能人工智能的发展&#xff0c;传统科学研究方法可能面临新的挑战或者被扩展。人工智能的发展带来了大数据分析、机器学习、深度学习等新的工具和方法&#xff0c;这些方法在处理复杂系统和大规模数据方面表现出色&#xff0c;使得科学研究变得更加多样化和复杂化。对智能…

stm32 开发板可以拿来做什么?

STM32开发板可以用来做许多不同的事情&#xff0c;具体取决于您的应用需求和编程能力。我收集归类了一份嵌入式学习包&#xff0c;对于新手而言简直不要太棒&#xff0c;里面包括了新手各个时期的学习方向编程教学、问题视频讲解、毕设800套和语言类教学&#xff0c;敲个22就可…

iMazing 3.0.3.1Mac中文破解版下载安装激活

今天&#xff0c;小编要分享的是Mac下一款可以帮助用户管理IOS设备的软件——iMazing&#xff0c;之前&#xff0c;小编也分享的过类似的软件&#xff0c;iMazing却有独特之处。小子这次带来的是3.0.3.1版本。 iMazing 3是一款iOS设备管理软件&#xff0c;该软件支持对基于iOS…

记录一次微信小程序申诉定位权限过程

1 小程序接到通知&#xff0c;检测到违规&#xff0c;需要及时处理&#xff0c;给一周的缓冲时间&#xff0c;如果到期未处理&#xff0c;会封禁能力&#xff08;2023-11-17&#xff09; 2 到期后&#xff0c;仍未处理&#xff0c;封禁能力&#xff08;2023-11-24&#xff09; …

云视频监控中的高效视频转码策略:视频汇聚EasyCVR平台H.265自动转码H.264能力解析

随着科技的快速发展&#xff0c;视频监控技术已经广泛应用于各个领域&#xff0c;如公共安全、商业管理、教育医疗等。与此同时&#xff0c;视频转码技术作为视频处理的关键环节&#xff0c;也在不断提高视频的质量和传输效率。 一、视频监控技术的演进 视频监控技术的发展历…

传言称 iPhone 16 Pro 将支持 40W 快速充电和 20W MagSafe

目前&#xff0c;iPhone 15 和 iPhone 15 Pro 机型使用合适的 USB-C 电源适配器可实现高达 27W 的峰值充电速度&#xff0c;而 Apple 和授权第三方的官方 MagSafe 充电器可以高达 15W 的功率为 iPhone 15 机型进行无线充电。所有四款 iPhone 15 机型均可使用 20W 或更高功率的电…

zabbix服务器运维命令

查看磁盘大小 df -h 看挂载点是/的项目看内存使用大小 free -h查看cpu的大小和负载 top -c查看库大小 mysql -u root -p select table_schema as 数据库, sum(table_rows) as 记录数,sum(truncate(data_length/1024/1024, 2)) as 数据容量(MB), sum(truncate(index_length/…

“论基于构件的软件开发方法及其应用”写作框架,软考高级论文,系统架构设计师论文

论文真题 基于构作的软件开发 (Component-Based Software Development&#xff0c;CBSD) 是一种基于分布对象技术、强调通过可复用构件设计与构造软件系统的软件复用途径。基于构件的软件系统中的构件可以是COTS &#xff08;Commercial-Off-the-Shelf&#xff09;构件&#x…

Linux配置仓库,安装软件

在Linux中安装软件&#xff0c;必须得配置仓库&#xff0c;挂载&#xff0c;才能安装成功 1.选择使用的虚拟机&#xff0c;右键点击“设置” 2.点击“CD/DVD”&#xff0c;勾选“设备状态”中的“已连接”和启动时链接&#xff0c;选择ISO映像文件 3..开启虚拟机 4.配置仓库…

利用 Selenium 自动化抓取 Web of Science 论文数据:以 IEEE SENSORS JOURNAL 为例

在当今数字化时代&#xff0c;科研工作者面临着海量学术信息的挑战。有效地收集、筛选和分析相关领域的最新研究成果&#xff0c;对于保持科研竞争力至关重要。然而&#xff0c;手动检索和整理学术文献不仅耗时耗力&#xff0c;还容易出现疏漏。为了解决这一问题&#xff0c;我…

conda篇----在已有conda环境的基础上升级python包

conda篇----在已有conda环境的基础上升级python包 原先的python版本 第一步&#xff1a; conda update --all(py11) [xxxaivrs01 xxx]$ conda update --all Collecting package metadata (current_repodata.json): done Solving environment: done> WARNING: A newer vers…

【spark】Exception in thread “main“ ExitCodeException exitCode=-1073741701

在window上运行spark程序写到本地文件的时候报错。 val rdd sc.sparkContext.parallelize(list)val arr rdd.collect()arr.foreach(println)rdd.saveAsTextFile("test1")sc.close()错误信息: zhangsan lisi wangwu Exception in thread "main" ExitCode…

C++ | Leetcode C++题解之第228题汇总区间

题目&#xff1a; 题解&#xff1a; class Solution { public:vector<string> summaryRanges(vector<int>& nums) {vector<string> ret;int i 0;int n nums.size();while (i < n) {int low i;i;while (i < n && nums[i] nums[i - 1] …

【PB案例学习笔记】-31制作一个动态设置菜单的程序

写在前面 这是PB案例学习笔记系列文章的第31篇&#xff0c;该系列文章适合具有一定PB基础的读者。 通过一个个由浅入深的编程实战案例学习&#xff0c;提高编程技巧&#xff0c;以保证小伙伴们能应付公司的各种开发需求。 文章中设计到的源码&#xff0c;小凡都上传到了gite…

研华运动控制卡在LabVIEW中的应用

在现代工业和科研领域中&#xff0c;精密运动控制系统的需求日益增加。这些系统广泛应用于自动化生产线、精密机械加工、机器人控制、光学仪器调试和实验室自动化设备等诸多领域。本文以研华公司的运动控制卡为例&#xff0c;详细介绍其在LabVIEW中的应用&#xff0c;展示如何通…

【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第一篇 嵌入式Linux入门篇-第十九章 Linux 工具之make 工具和 makefile 文件

i.MX8MM处理器采用了先进的14LPCFinFET工艺&#xff0c;提供更快的速度和更高的电源效率;四核Cortex-A53&#xff0c;单核Cortex-M4&#xff0c;多达五个内核 &#xff0c;主频高达1.8GHz&#xff0c;2G DDR4内存、8G EMMC存储。千兆工业级以太网、MIPI-DSI、USB HOST、WIFI/BT…

【PTA天梯赛】L1-006 连续因子(20分)

作者&#xff1a;指针不指南吗 专栏&#xff1a;算法刷题 &#x1f43e;或许会很慢&#xff0c;但是不可以停下来&#x1f43e; 文章目录 题目题解题意步骤 总结 题目 题目链接 题解 题意 求解n的最长连续因子 和因子再相乘的积无关&#xff0c;真给绕进去了 步骤 双重循…

Backend - C# 的日志Lognet4

目录 一、安装 log4net 插件 &#xff08;一&#xff09;作用 &#xff08;二&#xff09;操作 &#xff08;三&#xff09;注意 二、配置 &#xff08;一&#xff09;配置AssemblyInfo.cs &#xff08;二&#xff09;配置log4net.config 1. 创建log4net.config文件&#xff08…