css 居中方式

居中分为水平居中垂直居中

1. 水平居中
	1.1 文字
		text-align:center;
	1.2 盒子
		1.2.1:inline-block + text-align 一 center;
		1.2.2:absolute+transform 一 父元素 display:relative;子元素 display:absolute; left:50%;transform: translatex(-50%);
		1.2.3:absolute + margin 一 父元素 display:relative;子元素 display:absolute; left: 0; right: 0; margin:auto;
	1.3 文字/盒子
		flex布局父元素 display:flex; justify-content: center;
2. 垂直居中
	2.1 文字 line-height
		line-height = height
	2.2 盒子
		2.2.1 父元素 display:relative;子元素 display:absolute; top: 50%;transform: translateY(-50%);
		2.2.2: absolute+transform
父元素 display:relative;子元素 displav:absolute: top: 0: bottom: 0: margin:auto:
		2.2.3: absolute + margin
	2.3文字/盒子
		2.3.1 flex布局父元素 displav:flex:alian-items: center:
		2.3.2: table布局父元素 display:table-cell; vertical-align:middle:

在这里插入图片描述

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

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

相关文章

vue2踩坑之项目:vue2+element实现前端导出

1.安装插件依赖 npm i --save xlsx0.17.0 file-saver2.0.5 2.单页面引入 前端导出插件 import FileSaver from "file-saver"; import * as XLSX from "xlsx"; //html <el-form-item><el-button type"primary" plain size"mini&quo…

VirtualBox安装openSUSE-Leap-15.5虚拟机并配置网络

VirtualBox安装openSUSE-Leap-15.5虚拟机并配置网络 适用于在VirtualBox平台上安装openSUSE-Leap-15.5虚拟机。 1. 安装准备 1.1 安装平台 Windows 11 1.2. 软件信息 软件名称软件版本安装路径Oracle VM VirtualBoxVirtualBox-7.0.12-159484D:\softwareopenSUSE-Leapopen…

Ubuntu重启后进入initramfs导致无法开机

今晚&#xff0c;我的电脑意外关机&#xff0c;重新开机后打开了虚拟机后出现initramfs&#xff0c;一直无法开机。该虚拟机使用的是 vm17,系统是ubuntu20, 解决方案 使用如下命令查看和识别磁盘、分区或文件系统的信息 在initramfs后面输入 fsck /dev/sdb4 ,即修复上面损坏的…

模型Model:字符串列表模型QStringListModel

一、QStringListModel &#xff08;1&#xff09;功能&#xff1a;处理字符串列表的数据模型&#xff0c;可作为QListView的数据模型&#xff0c;在界面上显示和编辑字符串列表。 二、QStringListModel 类中的函数 1)、 QStringListModel(QObject *parent Q_NULLPTR) //构造函…

前后端分离,仓储模式的医院安全(不良)事件报告系统

医院安全&#xff08;不良&#xff09;事件报告系统源码&#xff0c;PHP语言开发 医院不良事件上报系统&#xff0c;按照不良事件的管理部门不同&#xff0c;分为护理不良事件、药品不良反应事件、医技不良事件、院内感染事件、输血不良反应事件、器械不良事件、信息不良事件、…

【EI会议征稿通知】第五届电子商务与互联网技术国际学术会议(ECIT 2024)

2023 4th International Conference on E-Commerce and Internet Technology 第五届电子商务与互联网技术国际学术会议(ECIT 2024) 电子商务是以信息网络技术为手段&#xff0c;以商品交换为中心的商业活动。在互联网开放的网络环境下&#xff0c;基于客户端/服务端应用方式&…

Go语言圣经总结——基础/复合数据类型

一、程序结构 1.1 命令行参数 os 包以跨平台的方式&#xff0c;提供了一些与操作系统交互的函数和变量。程序的命令行参数可从 os 包的 Args 变量获取&#xff1b;os 包外部使用 os.Args 访问该变量。 var s, sep string // 第一种循环 for i : 1; i < len(os.Args); i {…

移动端开发进阶之蓝牙通讯(四)

移动端开发进阶之蓝牙通讯(四) 在移动端开发实践中,可能会要求在不同的设备之间切换,从而提升用户体验; 或者为了提升设备的利用率,实现设备之间的连接和协同工作; 不得不通过多端连接,将多个设备连接在一起,实现设备之间的数据共享、远程控制等功能,根据具体的应用…

HANA:存储过程(Procedures) DBUG

作者 idan lian 如需转载备注出处 如果对你有帮助&#xff0c;请点赞收藏~~~ 1.场景 最近不是写了蛮多hana的存储过程吗&#xff0c;如果是简单的增删改查&#xff0c;如果结果错了&#xff0c;还是比较容易找到错误在哪的&#xff0c;但是逐渐假如循环啊&#xff0c;变量判…

Docker之nacos集群部署

前言 Nacos 是一个开源的注册中心和配置中心&#xff0c;用于实现微服务架构中的服务发现、服务治理和动态配置管理。在 Docker 中使用 Nacos&#xff0c;你可以通过拉取官方提供的 Docker 镜像并运行容器的方式来快速部署 一.Nacos镜像拉取及独立模式 镜像拉取命令详解&…

渗透测试(14)- HTTP协议解析

HTTP(HyperText Transfer Protocol)即 超文本传输协议 &#xff0c;是一种详细规定了浏览器和 服务器之间互相通信的规则&#xff0c;它是万维网交换信息的基础&#xff0c;它允许将 HTML( 超文本标 记语言 ) 文档从 Web 服务器传送到Web 浏览器&#xff0c;用于客户端和服务器…

目标检测--01

基本概念 什么是目标检测&#xff1f; ​ 目标检测&#xff08;Object Detection&#xff09;的任务是找出图像中所有感兴趣的目标&#xff08;物体&#xff09;&#xff0c;确定它们的类别和位置&#xff0c;是计算机视觉领域的核心问题之一。由于各类物体有不同的外观、形状…

【openwrt】【overlayfs】Openwrt系统overlayfs挂载流程

overlayfs是一种叠加文件系统&#xff0c;在openwrt和安卓系统中都有很广泛的应用&#xff0c;overlayfs通常用于将只读根文件系统(rootfs)和可写文件系统(jffs2)进行叠加后形成一个新的文件系统&#xff0c;这个新的文件系统“看起来”是可读写的&#xff0c;这种做法的好处是…

软件设计师6--流水线技术

软件设计师6--流水线技术 考点1&#xff1a;流水线--概念考点2&#xff1a;流水线--流水线计算考点3&#xff1a;流水线--流水线吞吐率计算例题&#xff1a; 考点1&#xff1a;流水线–概念 相关参数计算&#xff1a; 流水线执行时间计算、流水线吞吐率、流水线加速比、流水线…

如何使用视频下载助手获取公众号视频链接

微信公众号视频链接如何提取呢&#xff1f;今天就来说视频下载助手提取微信公众号的视频链接! 1:公众号获取视频下载助手二维码&#xff0c;并长按添加 2:找到需要下载的公众号带有视频的文章并转发给视频下载助手 3:提取完成后用户可以在视频下载助手中点击返回提取好的视频并…

IO网络5.0

思维导图 使用select实现TCP客户端的并发 #include <stdio.h> #include <string.h> #include <stdlib.h> #include <myhead.h>#define SER_PORT 8888 //服务器端口号 #define SER_IP "192.168.122.61" //服务器客户端//客户端TCP int ma…

解决Microsoft outlook新版本无法支持部分邮件模式问题

问题原因&#xff1a;Outlook16.60及以上 for Mac和Outlook微软商店新版均启用了新界面&#xff0c;暂时不支持POP、Exchange等电子邮件协议。Office里的Outlook客户端不受影响。 注意事项&#xff1a;千万不要使用360软件管家或者腾讯软件管家等卸载微软商店的Outlook应用&am…

Python学习之路——异常捕获

一、什么是异常 当检测到一个错误时&#xff0c;Python解释器就无法继续执行了&#xff0c;反而出现了一些错误的提示&#xff0c;这就是所谓的“异常”&#xff0c;也就是bug 二、异常的捕获方法 当我们的程序遇到bug&#xff0c;那么就下来有两种情况 ①整个程序因为一个…

cpp多线程(二)——对线程的控制和锁的概念

这篇文章是笔者学习cpp多线程操作的第二篇笔记&#xff0c;没有阅读过第一篇的读者可以移步此处&#xff1a; Cpp多线程&#xff08;一&#xff09;-CSDN博客 如果读者发现我的文章里有问题&#xff0c;欢迎交流哈&#xff01; 一、如何控制线程呢&#xff1f; c11在std:…

PBR材质背光面太暗优化

图形学中漫反射光照遵循兰伯特光照模型&#xff0c;它的公式如下 其中&#xff1a; &#xff1a;漫反射光颜色 &#xff1a;入射光颜色 &#xff1a;材质的漫反射系数 &#xff1a;法线方向 &#xff1a;光源方向 由于背光面的法线方向和光源方向的点积为负数&#xff0c;因此…