听说还有人不知道如何实现水平垂直居中?

HTML 代码部分

块级元素

<div class="parent"><div class="child">child</div>
</div>

行内元素

<div class="parent"><span class="child">child</span>
</div>

水平垂直居中

1、行内元素

.parent {text-align: center;line-height: 50px;height: 50px;
}

2、flex

.parent {width: 600px;height: 200px;border: 1px solid red;display: flex;align-items: center;justify-content: center; 
}
优点:更灵活,也更简洁,可维护性也更强。只要不考虑IE,这个方案几乎是最优选择吧。
缺点:如果还在使用IE浏览器的话,flex布局就没那么香了。

3、绝对定位 + margin: auto;

.parent {position: relative;height: 200px;border: 1px solid red;
}
.child {width: 80px;height: 40px;position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;border: 1px solid green;
}
优点:不需要提前知道尺寸,兼容性好.
缺点:目前已经不建议使用绝对定位 absolut了,如果还在用IE开发,这个方法还是比较推荐的。

4、绝对定位(已知宽高)

.parent {position: relative;height: 200px;border: 1px solid red;
}
.child {width: 80px;height: 40px;border: 1px solid green;position: absolute;left: 50%;top: 50%;margin-top: -20px;margin-left: -40px;
}
	缺点:1、需要提前知道 child 的尺寸,margin-top: -(高度的一半); margin-left: -(宽度的一半);2、现在已经不建议使用绝对定位 absolute,特别是在移动设备上。优点: 兼容性不错,也算是一点小技巧吧。

5、绝对定位(未知宽高)

.parent {position: relative;height: 200px;border: 1px solid red;
}
.child {width: 80px;height: 40px;border: 1px solid green;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);
}
	优点:不需要提前知道尺寸缺点:兼容性一般般

6、grid

.parent {width: 600px;height: 200px;border: 1px solid red;display: grid;
}
.child {justify-self: center;align-self: center;border: 1px solid pink;
}

7、table

.parent {width: 600px;height: 200px;border: 1px solid red;display: table;
}
.child {display: table-cell;vertical-align: middle;text-align: center;
}

这样也行

<table><tr><td align="center" valign="middle">content</td> </tr>
</table>

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

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

相关文章

C++ STL map迭代器失效问题

最近在开发过程中&#xff0c;定位一个问题的时候&#xff0c;发现多线程场景下大量创建和销毁某个C:\Windows\System32\reg.exe时出现了383个进程创建消息处理的接口&#xff0c;和384个进程销毁处理消息的接口都在等待锁&#xff0c;另外一个线程也在等锁&#xff0c;后面看了…

mysql8下载与安装教程

文章目录 1. MySQL下载2. 方式一&#xff1a;msi文件安装2.1 安装2.2 添加环境变量2.3 登录mysql 3. 方式二&#xff1a;zip文件安装3.1 安装3.2 配置文件3.3 加入环境变量3.4 初始化mysql3.5 登录mysql 1. MySQL下载 以下两个网址二选一 官网&#xff1a;https://downloads.…

CPU、GPU、TPU内存子系统架构

文章目录 CPU、GPU、TPU内存子系统架构概要CPUGPUTPU共同点和差异&#xff1a; CPU、GPU、TPU内存子系统架构 概要 Memory Subsystem Architecture&#xff0c;图源自TVM CPU CPU&#xff08;中央处理器&#xff09;的内存子系统&#xff1a;隐式管理 主内存&#xff08;…

lv11 嵌入式开发 C工程与寄存器封装 10

目录 1 C语言工程介绍 1.1 工程模板介绍 1.2 启动代码分析 2 C语言实现LED实验 2.1 C语言如何实现寄存器读写 2.2 实现LED实验 2.3 练习 1 C语言工程介绍 1.1 工程模板介绍 工程目录&#xff0c;后续代码都会利用到这个目录 interface.c 写了一个main函数的框架 int …

BERT-pytorch源码实现,解决内存溢出问题

BERT-pytorch源码实现&#xff0c;解决内存溢出问题 相信大家很多人都在做BERT这个模型&#xff0c;但是&#xff0c;有些人可能就是直接从transfermer这个模型里直接导入数据&#xff0c;但是这种方法不方便我们修改模型&#xff0c;于是有些人就通过pytorch详细实现了BERT,但…

浏览器v8垃圾回收机制和内存泄漏分析-初级

借鉴&#xff1a;一文搞懂V8引擎的垃圾回收 - 掘金 (juejin.cn) 聊聊V8引擎的垃圾回收 - 掘金 (juejin.cn) 内存泄漏方向&#xff1a; 1、全局变量 未手动清除 2、定时器 未手动清除 3、闭包中使用了匿名函数 未手动清除 4、dom被赋值使用后 未手动清除 其他解决方式 1、…

均匀球形分布的随机三维单位向量

生成具有均匀球形分布的随机三维单位向量[参考] import numpy as np import matplotlib.pyplot as plt def random_three_vector():"""Generates a random 3D unit vector (direction) with a uniform spherical distributionAlgo from http://stackoverflow.c…

使用sizeof计算普通变量所占空间大小

// 32位WinNT操作系统环境下 char str[] "hello"; char *p str; int n 10;sizeof(str) sizeof(p) sizeof(n) void Func(char str[100]) {sizeof(str) }void *p malloc(100); sizeof(p) 解析&#xff1a; str变量表示数组&#xff0c;对数组变量做size…

区间预测 | Matlab实现BP-KDE的BP神经网络结合核密度估计多变量时序区间预测

区间预测 | Matlab实现BP-KDE的BP神经网络结合核密度估计多变量时序区间预测 目录 区间预测 | Matlab实现BP-KDE的BP神经网络结合核密度估计多变量时序区间预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.BP-KDE多变量时间序列区间预测&#xff0c;基于BP神经网络多…

MFC 绘制单一颜色三角形、渐变颜色边框三角形、渐变填充三角形、正弦函数曲线实例

MFC 绘制三种不同圆形以及绘制正弦函数曲线 本文使用visual Studio MFC 平台实现绘制单一颜色圆形、渐变颜色边框圆形、渐变填充圆形以及绘制三角函数正弦函数曲线. 关于基础工程的创建请参考 01-Visual Studio 使用MFC 单文档工程绘制单一颜色直线和绘制渐变颜色的直线 02-vis…

Jenkins CI/CD

1、 Jenkins CI/CD 流程图 说明&#xff1a;这张图稍微更形象一点&#xff0c;上线之前先把代码git到版本仓库&#xff0c;然后通过Jenkins 如Java项目通过maven去构建&#xff0c;这是在非容器之前&#xff0c;典型的自动化的一个版本上线流程。那它有哪些问题呢&#xff1f; …

ASN.1 编码规则概述(一)

文章目录 一、ASN.1二、 ASN.1的标准编码规则分类三、描述ASN.1记法的标准四、描述ASN.1编码规则的标准 一、ASN.1 ASN.1&#xff08;Abstract Syntax Notation One) 是一套标准&#xff0c;是描述数据的表示、编码、传输、解码的灵活的记法&#xff0c;它提供了一套正式、 无…

C# 关于异常处理 try-catch语句的使用

在实际应用中&#xff0c;比如涉及文件读写、网络通信时&#xff0c;会因为文件不存在、权限不够、网络异常等原因引发异常&#xff0c;或者对数据库连接、查询、更新等操作&#xff0c;会因为连接超时、语法错误、唯一约束冲突等引发异常。 看过去的代码&#xff0c;当进行上…

基于opencv+ImageAI+tensorflow的智能动漫人物识别系统——深度学习算法应用(含python、JS、模型源码)+数据集(四)

目录 前言总体设计系统整体结构图系统流程图 运行环境爬虫模型训练实际应用 模块实现1. 数据准备1&#xff09;爬虫下载原始图片2&#xff09;手动筛选图片 2. 数据处理3. 模型训练及保存4. 模型测试1&#xff09;前端2&#xff09;后端 系统测试1. 测试效果2. 模型应用1&#…

webshell之内置函数免杀

原始webshell 查杀的点在于Runtime.getRuntime().exec非常明显的特征 利用ProcessBuilder替换Runtime.getRuntime().exec(cmd) Runtime.getRuntime().exec(cmd)其实最终调用的是ProcessBuilder这个函数&#xff0c;因此我们可以直接利用ProcessBuilder来替换Runtime.getRunti…

Python面向对象编程——类方法、实例方法和静态方法总结

在Python面向对象编程中&#xff0c;类方法&#xff08;class methods&#xff09;、实例方法&#xff08;instance methods&#xff09;和静态方法&#xff08;static methods&#xff09;是不同类型的方法&#xff0c;它们有一些联系&#xff0c;但也存在一些明显的区别。 类…

【服务器能干什么】二十分钟搭建一个属于自己的 RSS 服务

如果大家不想自己捣鼓,只是想尝尝鲜,可以在下面留言,我后台帮大家开几个账号玩一玩。 哔哩哔哩【高清版本可以点击去吐槽到 B 站观看】:【VPS服务器到底能干啥】信息爆炸的年代,如何甄别出优质的内容?你可能需要自建一个RSS服务!_哔哩哔哩_bilibili 前言 RSS 服务 市…

二年级 最少需要几个刻度?

娃二年级题目&#xff1a;请你设计一把尺子&#xff0c;用这把尺子一次能画出 1~8厘米八条不同长度的线段。最少需要几个刻度&#xff1f; 答&#xff1a;最少需要 5 个刻度&#xff1b; 方案有&#xff1a; 0, 1, 2, 5, 8 0, 1, 3, 7, 8 0, 1, 4, 6, 8 0, 1, 5, 6, 8 0, 1, 5…

post请求参数全大写后台接不到参数

post请求参数全大写后台接不到参数 开发过程中&#xff0c;我们一般都习惯用驼峰命名法&#xff0c;但是特殊情况要求请求参数全大写&#xff08;或者首字母大写&#xff09;&#xff0c;测试验证的时候发现&#xff0c;接收不到请求参数。 前端请求传递&#xff1a; 服务端接…

【nlp】3.6 Tansformer模型构建(编码器与解码器模块耦合)

Tansformer模型构建(编码器与解码器模块耦合) 1. 模型构建介绍2 编码器-解码器结构的代码实现3 Tansformer模型构建过程的代码实现4 小结1. 模型构建介绍 通过上面的小节, 我们已经完成了所有组成部分的实现, 接下来就来实现完整的编码器-解码器结构耦合. Transformer总体架…