行内元素、块级元素居中

行内元素居中

水平居中

{text-align:center;}

垂直居中

  1. 单行——行高等于盒子高度
<head><style>.father {width: 400px;height: 200px;/* 行高等于盒子高度:line-height: 200px; */line-height: 200px;background-color: pink;}.son {}</style>
</head>
<body><div class="father"><span class="son">我是行内元素,我想垂直居中</span></div>
</body>
  1. 垂直居中:多行——display:table-cell、vertical-align: middle
<head><style>.father {width: 400px;height: 200px;/* 主要代码:display: table-cell; vertical-align: middle;*/display: table-cell;background-color: pink;vertical-align: middle;}.son {}</style>
</head>
<body><div class="father"><span class="son">我是行内元素,我想垂直居中。我是行内元素,我想垂直居中。我是行内元素,我想垂直居中。我是行内元素,我想垂直居中。我是行内元素,我想垂直居中。我是行内元素,我想垂直居中。</span></div>
</body>

效果如下:
在这里插入图片描述

  1. 多行文字水平垂直居中
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>table</title><style>.parent{display: table;width: 400px;height: 400px;text-align: center;border:1px solid red;}.child{display: table-cell;    /*子元素成为表格单元格(类似 <td> 和 <th>)*/background: yellow;vertical-align: middle; /*表格容器可以设置垂直对齐属性*/white-space: pre-line;/* 合并空白符序列,但是保留换行符。 */}</style>
</head>
<body><div class="parent"><div class="child">33  22多行居中    达到多行居中多行居中多行居中多行居中</div></div></body>
</html>

在这里插入图片描述

块级元素居中

可以让一个盒子实现水平居中,需要满足一下两个条件:

  1. 必须是块级元素。
  2. 盒子必须指定了宽度(width)

水平居中

  1. 使用margin
 { width:960px; margin:0 auto;}
  1. 使用定位

盒子宽高已知, position: absolute; left: 50%; margin-left:-自身一半宽度;

<head><style>.father {width: 400px;height: 200px;background-color: pink;position: relative;}.son {width: 200px;height: 100px;background-color: skyblue;position: absolute;left: 50%;/* 如果元素没有设置宽度,不能使用margin-left,可以使用transform: translateX(-50%); 效果相同*/margin-left: -100px;}</style>
</head>
<body><div class="father"><div class="son">我是块级元素,我想水平居中。</div></div>
</body>
</html>
  1. 使用flex
<head><style>.father {width: 400px;height: 200px;background-color: pink;display: flex;justify-content: center;}.son {width: 200px;height: 100px;background-color: skyblue;}</style>
</head>
<body><div class="father"><div class="son">我是块级元素,我想水平居中。</div></div>
</body>
</html>

垂直居中

  1. 使用定位

盒子宽高已知, position: absolute; top: 50%; margin-top:-自身一半高度;

<head><style>.father {width: 400px;height: 200px;background-color: pink;position: relative;}.son {width: 200px;height: 100px;background-color: skyblue;position: absolute;top: 50%;/* 如果元素没有设置高度,不能使用margin-top,可以使用transform: translateY(-50%); 效果相同*/margin-top: -50px;}</style>
</head>
<body><div class="father"><div class="son">我是块级元素,我想垂直居中。</div></div>
</body>
</html>
  1. 使用flex
<head><style>.father {width: 400px;height: 200px;background-color: pink;display: flex;align-items: center;}.son {width: 200px;height: 100px;background-color: skyblue;}</style>
</head>
<body><div class="father"><div class="son">我是块级元素,我想垂直居中。</div></div>
</body>
</html>

水平垂直居中

  1. 使用定位
<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>定位 水平垂直居中</title><style>* {margin: 0;padding: 0;}html,body {height: 100%;}.box {position: absolute;top: 50%;margin-top: -50px;left: 50%;margin-left: -50px;/* transform: translate(-50%, -50%); */width: 100px;height: 100px;background-color: red;}</style>
</head><body><div class="box"></div>
</body>
</html>

这种方法不推荐,因为当盒子宽高不是偶数的时候,一般会出现小数点,推荐使用以下方式,比较省事,让浏览器自己去计算。

  1. 让外边距自动拉扯元素位置进行平衡
  1. 设置 margin为 auto
  2. top left right bottom 四个方向设置为0
  3. 让外边距自动拉扯元素位置进行平衡
<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>定位 定位居中</title><style>* {margin: 0;padding: 0;}html,body {height: 100%;}.box {position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;width: 113px;height: 100px;background-color: red;}</style>
</head><body><div class="box"></div>
</body>
</html>
  1. 使用flex
.container {height: 100vh; /*使容器高度为100视口高度,使容器占据整个屏幕 */display: flex;justify-content: center;align-items: center;
}
.content {background-color: #cccccc;width:20 px;height: 20px;
}

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

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

相关文章

如何做好IT类的技术面试?

我们在找工作时&#xff0c;需要结合自己的现状&#xff0c;针对意向企业做好充分准备。作为程序员&#xff0c;你有哪些面试IT技术岗的技巧&#xff1f; 方向一&#xff1a;分享你面试IT公司的小技巧 我分享一些基于广泛观察和用户反馈的面试IT公司的小技巧&#xff1a; 技术准…

孟德尔随机化-痛风

写在前面 昨天看到文献&#xff0c;称饮酒与痛风无关联&#xff0c;甚是疑惑&#xff0c;今天刚好看了一篇新文献&#xff0c;虽然不是主要讲饮酒与痛风的&#xff0c;但也有牵扯到这方面内容&#xff0c;而且是相反的内容&#xff0c;特记录一下。 孟德尔随机化-受教育程度与…

vuepress创建步骤

背景 记录vuepress配置步骤&#xff0c;以便下次使用快速上手。 读此文章之前默认您已经学会了创建vuepress项目。vuepres快速开始 最终成品 doc.jeecgflow.com 配置步骤 创建.vuepress 目录。 你的文档目录下创建一个 .vuepress 目录。 创建.vuepress/config.js module.e…

mysql面试题 Day4

1 什么是覆盖索引&#xff1f;对要查询的列 和 查询条件中的列 有什么要求 覆盖索引&#xff08;Covering Index&#xff09;是指一个索引包含了一次查询所需的全部列&#xff0c;因此可以完全满足查询需求&#xff0c;而无需访问实际的表行数据。&#xff08;即避免回表操作&…

Mac窗口辅助管理工具:Magnet for mac激活版

magnet mac版是一款运行在苹果电脑上的一款优秀的窗口大小控制工具&#xff0c;拖拽窗口到屏幕边缘可以自动半屏&#xff0c;全屏或者四分之一屏幕&#xff0c;还可以设定快捷键完成分屏。这款专业的窗口管理工具当您每次将内容从一个应用移动到另一应用时&#xff0c;当您需要…

注意力机制 attention Transformer 笔记

动手学深度学习 这里写自定义目录标题 注意力加性注意力缩放点积注意力多头注意力自注意力自注意力缩放点积注意力&#xff1a;案例Transformer 注意力 注意力汇聚的输出为值的加权和 查询的长度为q&#xff0c;键的长度为k&#xff0c;值的长度为v。 q ∈ 1 q , k ∈ 1 k …

解析Java中的缓存机制及其实现方式

解析Java中的缓存机制及其实现方式 大家好&#xff0c;我是微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 在软件开发中&#xff0c;缓存是一种常见的优化技术&#xff0c;用于临时存储数据&#xff0c;以提高数据访问速度…

【WEB前端2024】3D智体编程:乔布斯3D纪念馆-第54课-poplang语音编程控制机器人

【WEB前端2024】3D智体编程&#xff1a;乔布斯3D纪念馆-第54课-poplang语音编程控制机器人 使用dtns.network德塔世界&#xff08;开源的智体世界引擎&#xff09;&#xff0c;策划和设计《乔布斯超大型的开源3D纪念馆》的系列教程。dtns.network是一款主要由JavaScript编写的…

【TORCH】神经网络权重初始化和loss为inf

文章目录 数据输入范围和权重初始化数据范围对权重初始化的影响示例代码输入数据标准化 说明其他注意事项 常见初始化方法常见的权重初始化方法示例代码说明 模型默认初始化方法&#xff0c;会不会导致Loss为inf示例说明初始化权重导致 Loss 为 inf避免 Loss 为 inf 的建议示例…

SQL 对一个经常有数据更新和删除操作的表,怎样优化以减少磁盘空间的占用?

文章目录 一、定期清理不再需要的数据二、使用合适的数据类型三、压缩数据四、删除重复数据五、分区表六、索引优化七、碎片整理八、归档历史数据九、监控和评估 在数据库管理中&#xff0c;当面对一个经常进行数据更新和删除操作的表时&#xff0c;磁盘空间的有效利用是一个重…

Pogo-DroneCANPWM模块:可实现DroneCAN转PWM,DroneCAN转dshot,DroneCAN转bdshot

关键词&#xff1a;Ardupilot&#xff0c;Pixhawk&#xff0c;PWM&#xff0c;dshot&#xff0c;bdshot&#xff0c;DroneCANPWM&#xff0c;电调ESC&#xff0c;DroneCAN&#xff0c;UAVCAN&#xff0c;飞控&#xff0c;无人机&#xff0c;UAV Keywords&#xff1a;Ardupilot…

MSPM0G3507——OPENMV给M0传数据(用数据包)互相通信(以循迹为例)

OPENMV端代码 # main.py -- put your code here! import pyb, sensor, image, math, time from pyb import UART import ustruct from image import SEARCH_DS, SEARCH_EX import time import sensor, displayuart UART(3, 115200, bits8, parityNone, stop1, timeout_char10…

Scikit-learn高级教程:深入理解机器学习算法

目录 引言Scikit-learn概述 什么是Scikit-learnScikit-learn的主要功能安装和导入 数据预处理 数据加载数据清洗特征工程数据归一化与标准化 监督学习算法 线性回归逻辑回归支持向量机决策树与随机森林k-近邻算法朴素贝叶斯 无监督学习算法 K-means聚类层次聚类主成分分析&…

使用Redis进行分布式锁时需要注意哪些问题?Redis分布式锁的常见实现方式有哪些?

使用 Redis 进行分布式锁时需要注意以下几个问题&#xff1a; 锁的过期时间设置&#xff1a;要合理设置锁的过期时间&#xff0c;避免锁因持有进程崩溃或网络延迟等原因无法释放&#xff0c;导致死锁。原子性操作&#xff1a;获取锁和设置过期时间的操作需要保证原子性&#x…

C语言 猜测乒乓球队比赛名单

两个乒乓球队进行比赛&#xff0c;各出三人&#xff0c;甲队为A&#xff0c;B&#xff0c;C三人&#xff0c;乙队为X &#xff0c;Y &#xff0c;Z三人&#xff0c;已抽签决定比赛名单&#xff0c;有人向队员打听比赛的名单&#xff0c;A说他不和X比&#xff0c; C说他不和X&am…

计算机网络性能指标概述:速率、带宽、时延等

在计算机网络中&#xff0c;性能指标是衡量网络效率和质量的重要参数。本文将综合三篇关于计算机网络性能指标的文章&#xff0c;详细介绍速率、带宽、吞吐量、时延、时延带宽积、往返时延&#xff08;RTT&#xff09; 和利用率的概念及其在网络中的应用。 1. 速率&#xff08;…

开源六轴协作机械臂myCobot280实现交互式乘法!让学习充满乐趣

本文经作者Fumitaka Kimizuka 授权我们翻译和转载。 原文链接&#xff1a;myCobotに「頷き」「首振り」「首傾げ」をしてもらう &#x1f916; - みかづきブログ・カスタム 引言 Fumitaka Kimizuka 创造了一个乘法表系统&#xff0c;帮助他的女儿享受学习乘法表的乐趣。她可以…

大语言模型基础

大语言基础 GPT : Improving Language Understanding by Generative Pre-Training 提出背景 从原始文本中有效学习的能力对于减轻自然语言处理中对监督学习的依赖至关重要。很多深度学习方法需要大量人工标注的数据&#xff0c;限制了它们在很多领域的应用&#xff0c;收集更…

cs231n作业2 双层神经网络

双层神经网络 我们选用ReLU函数和softmax函数&#xff1a; 步骤&#xff1a; 1、LOSS损失函数&#xff08;前向传播&#xff09;与梯度&#xff08;后向传播&#xff09;计算 Forward: 计算score&#xff0c;再根据score计算loss Backward&#xff1a;分别对W2、b2、W1、b1求…

学懂C#编程:WPF应用开发系列——WPF之ComboBox控件的详细用法

WPF&#xff08;Windows Presentation Foundation&#xff09;中的ComboBox控件是一个下拉列表控件&#xff0c;允许用户从一组预定义的选项中选择一个选项。以下是ComboBox控件的详细用法&#xff0c;并附带示例说明。 ComboBox的基本用法 1. XAML定义&#xff1a; 在XAML中…