CSS 垂直水平居中总结(全)

目录

  • 1,不需要知道元素的宽高
    • 1.1,flex(2种)
    • 1.2,grid(2种)
    • 1.3,verticle-align:middle
    • 1.4,绝对定位
    • 1.5,table-cell
  • 2,需要知道元素的宽高
    • 2.1,绝对定位

以下面的代码为例

<div class="container"><div class="item"></div>
</div>

1,不需要知道元素的宽高

1.1,flex(2种)

最常用的,没有任何限制。

.container{display: flex;justify-content: center;align-items: center;
}

.container{display: flex;
}
.item {margin: auto;
}

1.2,grid(2种)

.container {display: grid;align-content: center;justify-content: center;
}
.container{display: grid;
}
.item {margin: auto;
}

1.3,verticle-align:middle

限制:

  1. 元素 display: inline-block
  2. 需要有一个兄弟元素作为参照物,并且会以最高的兄弟元素为作为参考,垂直于兄弟元素的中心点。所以可以利用伪元素。
.container {text-align: center;
}
.container::before {content : '';display: inline-block;vertical-align: middle;height: 100%;
}
.item {display: inline-block;width: 100px;height: 100px;vertical-align: middle;
}

1.4,绝对定位

.container {position: relative;
}
.item {width: 100px;height: 100px;position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: auto;
}

上下左右为 0 可以替换为 inset: 0,不过注意可能会有兼容性问题,参考。

1.5,table-cell

限制:元素 display: inline-block

.container {display: table-cell;text-align: center;vertical-align: middle;
}
.item {display: inline-block;width: 100px;height: 100px;
}

2,需要知道元素的宽高

2.1,绝对定位

.container {position: relative;
}
.item {width: 100px;height: 100px;position: absolute;left: 50%;top: 50%;margin: -50px 0 0 -50px;/* 或 */transform: translateX(-50px) translateY(-50px);
}

阮一峰-网格布局

以上。

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

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

相关文章

MySQL 索引,优化,回表,执行计划等相关总结学习

一、MySQL 执行流程 innoDB表引擎&#xff1a;默认的事务型引擎&#xff0c;最重要最广泛的存储引擎&#xff0c;性能非常优秀,数据村粗在共享表空间&#xff0c;可以通过配置分开,主键查询性能高于其他引擎 myISM表引擎&#xff1a;5.1版本前这个是默认的存储引擎&#xff0c…

第九节HarmonyOS 常用基础组件-Text

一、组件介绍 组件&#xff08;Component&#xff09;是界面搭建与显示的最小单位&#xff0c;HarmonyOS ArkUI声名式为开发者提供了丰富多样的UI组件&#xff0c;我们可以使用这些组件轻松的编写出更加丰富、漂亮的界面。 组件根据功能可以分为以下五大类&#xff1a;基础组件…

segment-anything安装教程

文章目录 一. segment-anything安装教程 一. segment-anything安装教程 官网安装说明:https://github.com/facebookresearch/segment-anything anaconda下新建一个环境 conda create -n sam python3.8激活新建的环境 conda activate sam更换conda镜像源 conda config --add ch…

基于Spring,SpringMVC,MyBatis的高校大学社团系统

文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于Spring,SpringMVC,MyBatis的高校大…

大厂面试整理

文章目录 1、[京东一面](https://blog.csdn.net/crazymakercircle/article/details/132150378)2、[阿里一面](https://blog.csdn.net/crazymakercircle/article/details/131147192)3、[顺丰一面](https://blog.csdn.net/crazymakercircle/article/details/132000420)4、[美团一…

Python过滤掉特定区域内的矩形框

Python过滤掉特定区域内的矩形框 前言前提条件相关介绍实验环境过滤掉特定区域内的矩形框方法一&#xff1a;直接法&#xff08;for循环遍历&#xff09;代码实现输出结果 方法二&#xff1a;列表推导式代码实现输出结果 前言 由于本人水平有限&#xff0c;难免出现错漏&#x…

Navicat Premium 16.3.3 Windows x64 Crack

增强您的表现。 Navicat 16 具有许多改进和功能&#xff0c;可以满足您的数据库开发需求。凭借 100 多项增强功能和全新界面&#xff0c;您可以探索构建、管理和维护数据库的新方法。构建时考虑到可用性。 Navicat 16 引入了许多 UI/UX 改进&#xff0c;以最大限度地提高您的效…

oracle 19c rac 安装手册

oracle 19c rac 安装手册 官方文档:https://docs.oracle.com/en/database/oracle/oracle-database/19/index.html 一、集群规划 再部署集群之前,需要对网络和存储两个方面进行规划。下面简述了网络和存储两个方面需要注意的地方。 Oracle RAC 数据库私有网络通信必须使用单…

P4 链表的节点数统计与链表数据查找替换

目录 前言 01 链表的节点数统计 02 链表数据查找替换 2.1 残疾的数据查找 2.2 数据查找优化 前言 &#x1f3ac; 个人主页&#xff1a;ChenPi &#x1f43b;推荐专栏1: 《C 》✨✨✨ &#x1f525; 推荐专栏2: 《 Linux C应用编程&#xff08;概念类&#xff09;》✨…

Java集合(二)

1. Map 1.1 HashMap 和 Hashtable 的区别 线程是否安全&#xff1a; HashMap 是非线程安全的&#xff0c;Hashtable 是线程安全的,因为 Hashtable 内部的方法基本都经过synchronized 修饰。&#xff08;如果你要保证线程安全的话就使用 ConcurrentHashMap 吧&#xff01;&…

Yocto - bb脚本中使用的SRC_URI、SRCREV和S

我们遇到的各种自己不了解的技术或产品时&#xff0c;都需要阅读用户手册。用户手册里的内容很多时&#xff0c;除了由目录组织文档结构外&#xff0c;通常还有有一个词汇表&#xff0c;一般作为附录放在文档最后。 通过这个按照字母排序的词汇表&#xff0c;可以在对整个文档还…

C#,数值计算——插值和外推,谢别德(Shep)插值方法的计算方法与源程序

1 文本格式 using System; namespace Legalsoft.Truffer { /// <summary> /// 谢别德插值方法 /// Object for Shepard interpolation using n points in dim dimensions. Call /// constructor once, then interp as many times as desired. /// &…

前端面试提问(3)

1、js两个数相加会不会丢精度&#xff1f; 可能会遇到精度丢失的问题。JavaScript 使用的是 IEEE 754 浮点数标准&#xff0c;即一种二进制表示法&#xff0c;有时不能准确地表示十进制小数。如果你需要进行精确的十进制数值计算&#xff0c;可以使用一些处理精确数值的库&…

4.C转python

1.建立函数: def 函数名(形参): 函数体(记得写缩进) return 返回值(python中可以没有return) 2.调用函数: 函数名(实参) 实参和形参个数相等即可,类型不需要相同 其中接收返回值与C中的差不多 3.如果只是定义而不调用则函数不会执行 4.先定义函数,后调用 5.python中可以…

每天五分钟计算机视觉:ImageNet大赛的世界冠军AlexNet模型

AlexNet模型 2012 Imagenet 比赛第一&#xff0c;Top5准确度超出第二10% &#xff0c;它让人们认识到了深度学习技术的威力。比 LeNet更深&#xff0c;用多层小卷积层叠加替换大卷积层&#xff0c;就是说每一个卷积层的通道数小&#xff0c;不像LeNet一样每个卷积层的通道数很大…

记录华为云服务器(Linux 可视化 宝塔面板)-- 防火墙篇

文章目录 前言安装防火墙防火墙设置防火墙操作1.设置开机启动防火墙2.查看防火墙开放哪些端口3.重载防火墙配置&#xff08;修改配置后重新启动才生效&#xff09;4.查看防火墙状态5.开启防火墙6.关闭防火墙 若遇到无法开启查询已开放的端口查询端口是否开放&#xff08;80&…

简单了解设计模式

常见的设计模式大致可以分为三个主要类别&#xff1a;创建型、结构型和行为型。以下是这三个类别下的各种模式&#xff1a; 创建型模式 (Creational Patterns)&#xff1a;这类模式主要关注如何创建对象。 单例模式 (Singleton)&#xff1a;确保某一个类只有一个实例&#xff0…

在内网开发中使用Nginx代理来访问钉钉新版服务端API

如果你在内网开发中使用Nginx代理来访问钉钉新版服务端API&#xff0c;你可以在Nginx配置文件中进行相应的配置。 以下是一个简单的示例Nginx配置&#xff0c;用于将对指定URL的请求代理到钉钉服务端API&#xff1a; server { listen 80; server_name your_server_domain; l…

Python爬虫-新能源汽车销量榜

前言 本文是该专栏的第11篇,后面会持续分享python爬虫案例干货,记得关注。 本文以懂车平台的新能源汽车销量榜单为例,获取各车型的销量排行榜单数据。具体实现思路和详细逻辑,笔者将在正文结合完整代码进行详细介绍。 废话不多说,跟着笔者直接往下看正文详细内容。(附带…

FFMPEG编译安装、简单使用

目录 源码下载编译和安装API简单使用源代码编译运行 工具的简单使用学习论坛 源码下载 地址: https://github.com/FFmpeg/FFmpeg git clone https://github.com/FFmpeg/FFmpeg.git编译和安装 因为使用在板端编译&#xff0c;因此没有使用交叉编译链的部分。将如下内容复制到…