【CSS】CSS水平居中方案

CSS水平居中方案

1. 行内元素水平居中

设置父元素的text-align:center

.box {width: 300px;height: 300px;margin: 100px auto;text-align: center;background-color: pink;
}

2. 块级元素水平居中

当块级元素设置了明确的宽度数值时,可以使用margin: 0 auto

3. 绝对定位

<div class="container"><div class="box"></div>
</div>
.container {position: relative;width: 300px;height: 300px;background-color: orange;
}
.box {position: absolute;left: 0;right: 0;width: 100px;height: 100px;background-color: pink;
}

4. flex布局

<div class="container"><div class="box"></div>
</div>
.container {display: flex;justify-content: center;width: 300px;height: 300px;background-color: orange;
}
.box {width: 100px;height: 100px;background-color: pink;
}

5. 利用形变trnasform:trnaslate()

.container {width: 300px;height: 300px;background-color: orange;
}
.box {position: relative;left: 50%;width: 100px;height: 100px;background-color: pink;transform: translateX(-50%);
}

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

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

相关文章

【opencv】示例-stiching_detailed.cpp 使用OpenCV进行图像拼接的整体流程

#include <iostream> // 引入输入输出流库 #include <fstream> // 引入文件流库&#xff0c;用于文件输入输出 #include <string> // 引入字符串库 #include "opencv2/opencv_modules.hpp" // 引入OpenCV模块 #include <opencv2/core/utility.h…

2023年看雪安全技术峰会(公开)PPT合集(11份)

2023年看雪安全技术峰会&#xff08;公开&#xff09;PPT合集&#xff0c;共11份&#xff0c;供大家学习参阅。 1、MaginotDNS攻击&#xff1a;绕过DNS 缓存防御的马奇诺防线 2、从形式逻辑计算到神经计算&#xff1a;针对LLM角色扮演攻击的威胁分析以及防御实践 3、TheDog、0…

2024软件工程第一次作业

communication tasks Set a project (can use the project I give in the class in the file), then try to develop a set of actions for the communication activity. Select one action and define a task set for it. 1.设置一个项目&#xff08;可以使用我上课在文件中给…

python调用Microsoft Word把文件夹下所有docx或doc批量转化为PDF

python调用Microsoft Word把文件夹下所有docx或doc批量转化为PDF 首先&#xff0c;确保你的系统上安装了Microsoft Word。然后&#xff0c;你需要安装comtypes库&#xff0c;如果你还没有安装&#xff0c;可以通过以下命令进行安装&#xff1a; pip install comtypes以下是一个…

Mac 软件清单

~自留备用~ Macbook用了几年之后, 512G的内置硬盘有些紧张了, 这几天总是提示空间不足, 就重装了下系统, 重装之后竟然不记得有些软件的名字和下载链接, 特此记录 Office 办公套件 直接从微软官网下载Office 安装包https://officecdnmac.microsoft.com/pr/C1297A47-86C4-4C1F…

Kafka 简单介绍

目录 一 消息队列&#xff08;MQ&#xff09; 1&#xff0c;为什么需要消息队列&#xff08;MQ 2&#xff0c;常见的 MQ 中间件 3&#xff0c;MQ 传统应用场景之异步处理 4&#xff0c;使用消息队列的好处 5&#xff0c;消息队列的两种模式 5.1点对点模式&#xf…

transformer上手(5) —— 必要的 Pytorch 知识

Transformers 库建立在 Pytorch 框架之上&#xff08;Tensorflow 的版本功能并不完善&#xff09;&#xff0c;虽然官方宣称使用 Transformers 库并不需要掌握 Pytorch 知识&#xff0c;但是实际上我们还是需要通过 Pytorch 的 DataLoader 类来加载数据、使用 Pytorch 的优化器…

【机器学习300问】68、随机初始化神经网络权重的好处?

一、固定的初始化神经网络权重可能带来的问题 在训练神经网络的时候&#xff0c;初始化权重如果全部设置为0或某个过大值/过小值。会导致一些问题&#xff1a; 对称权重问题&#xff1a;全为0的初始化权重会导致神经网络在前向传播时接收到的信号输入相同。每个神经网络节点中…

车载电子电器架构 —— 平行开发策略

车载电子电器架构 —— 平行开发策略 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。非必要不费力证明自己…

Jmeter配置服务器监控插件

1.安装插件管理器 插件官网地址&#xff1a;JMeter Plugins :: JMeter-Plugins.org 点击 Plugins Manager,如上图所示&#xff0c; &#xff0c;点击jar file下载“plugins-manager.jar”&#xff0c;下载后放到“jmeter\lib\ext”目录下&#xff0c;重启jmeter。 2.安装资源…

网络篇04 | 应用层 mqtt(物联网)

网络篇04 | 应用层 mqtt&#xff08;物联网&#xff09; 1. MQTT协议介绍1.1 MQTT简介1.2 MQTT协议设计规范1.3 MQTT协议主要特性 2 MQTT协议原理2.1 MQTT协议实现方式2.2 发布/订阅、主题、会话2.3 MQTT协议中的方法 3. MQTT协议数据包结构3.1 固定头&#xff08;Fixed header…

论文笔记:The Expressive Power of Transformers with Chain of Thought

ICLR 2024 reviewer 评分 6888【但是chair 很不喜欢】 1 intro 之前的研究表明&#xff0c;即使是具有理想参数的标准Transformer&#xff0c;也无法完美解决许多大规模的顺序推理问题&#xff0c;如模拟有限状态机、判断图中的节点是否相连&#xff0c;或解决矩阵等式问题 这…

系统架构最佳实践 -- 统一身份认证系统

目录 1.系统架构设计&#xff1a; 2.用户认证与授权&#xff1a; 3.用户身份管理&#xff1a; 4.安全性保障&#xff1a; 5.日志记录与审计&#xff1a; 6.高可用性与容错性&#xff1a; 7.用户体验优化&#xff1a; 随着互联网的快速发展和应用的普及&#xff0c;人们在…

数据结构,算法(一)--排序

排序 冒泡排序 两次for循环 一次循环可以将一个数据排好序&#xff0c;那两次for循环叠加就可以将整个数组的数据排好序。 //arr[i]>(<)arr[i1] 交换 ​ //走一轮用的代码 for(int i 0;i<arr.length-1;i){if(arr[i]>arr[i1]){//交换//并且要注意 i<arr.len…

博客摘录「 Python Web 开发简介」2024年4月10日

【深度之眼】【OpenCV】笔记汇总_opencv深度之眼笔记-CSDN博客

Linux操作系统中关于用户管理的操作

创建新用户 useradd 【选项】 用户名 在/etc/passwd中以追加的方式在passwd的最后一行添加用户信息。 可以使用命令tail -n 1/etc/passwd查看文件的最后一行内容。 ls /home/首先/home/这是普通用户的家目录&#xff0c; 在/home/下会有一个跟用户名同名的家目录&#xf…

《经典论文阅读2》基于随机游走的节点表示学习—Deepwalk算法

word2vec使用语言天生具备序列这一特性训练得到词语的向量表示。而在图结构上&#xff0c;则存在无法序列的难题&#xff0c;因为图结构它不具备序列特性&#xff0c;就无法得到图节点的表示。deepwalk 的作者提出&#xff1a;可以使用在图上随机游走的方式得到一串序列&#x…

荔枝派LicheePi 4A RISCV板子支持的好玩的AI模型

荔枝派LicheePi 4A 是基于 Lichee Module 4A 核心板的 高性能 RISC-V Linux 开发板&#xff0c;以 TH1520 为主控核心&#xff08;4xC9101.85G&#xff0c; RV64GCV&#xff0c;4TOPSint8 NPU&#xff0c; 50GFLOP GPU&#xff09;&#xff0c;板载最大 16GB 64bit LPDDR4X&…

给自己的机器人部件安装单目摄像头并实现gazebo仿真功能

手术执行器添加摄像头 手术执行器文件夹surgical_new内容展示如何添加单目摄像头下载现成的机器人环境文件启动仿真环境 手术执行器文件夹surgical_new内容展示 进入src文件夹下选择进入vision_obliquity文件夹 选择launch 有两个可用gazebo中rviz展示的launch文件&#xff0…

Github Coplit的认证及其在JetBrains中的使用

原文地址&#xff1a;Github Coplit的认证及其在JetBrains中的使用 - Pleasure的博客 下面是正文内容&#xff1a; 前言 今天分享一个可有可无的小技巧&#xff0c;水一篇文。 如标题所述&#xff0c;Github Coplit的认证及其在JetBrains中的使用 正文 介绍JetBrains JetBrain…