CSS 如何居中 DIV

如何居中 div?

  • 水平居中:给 div 设置一个宽度,然后添加 margin:0 auto 属性
div {width: 200px;margin: 0 auto;
}
  • 水平居中,利用 text-align:center 实现
.container {background: rgba(0, 0, 0, 0.5);text-align: center;font-size: 0;
}.box {display: inline-block;width: 500px;height: 400px;background-color: pink;
}
  • 让绝对定位的 div 居中
div {position: absolute;width: 300px;height: 300px;margin: auto;top: 0;left: 0;bottom: 0;right: 0;background-color: pink; /*方便看效果*/
}
  • 水平垂直居中一
/*确定容器的宽高宽500高300的层设置层的外边距div{*/
position: absolute;/*绝对定位*/
width: 500px;
height: 300px;
top: 50%;
left: 50%;
margin: -150px 0 0 -250px;/*外边距为自身宽高的一半*/
background-color: pink;/*方便看效果*/
}
  • 水平垂直居中二
/*未知容器的宽高,利用`transform`属性*/
div {position: absolute; /*相对定位或绝对定位均可*/width: 500px;height: 300px;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: pink; /*方便看效果*/
}
  • 水平垂直居中三
/*利用flex布局实际使用时应考虑兼容性*/
.container {display: flex;align-items: center; /*垂直居中*/justify-content: center; /*水平居中*/
}
.containerdiv {width: 100px;height: 100px;background-color: pink; /*方便看效果*/
}
  • 水平垂直居中四
/*利用text-align:center和vertical-align:middle属性*/
.container {position: fixed;top: 0;right: 0;bottom: 0;left: 0;background: rgba(0, 0, 0, 0.5);text-align: center;font-size: 0;white-space: nowrap;overflow: auto;
}.container::after {content: '';display: inline-block;height: 100%;vertical-align: middle;
}.box {display: inline-block;width: 500px;height: 400px;background-color: pink;white-space: normal;vertical-align: middle;
}

总结:

一般常见的几种居中的方法有:对于宽高固定的元素(1)我们可以利用margin:0 auto来实现元素的水平居中。(2)利用绝对定位,设置四个方向的值都为0,并将margin设置为auto,由于宽高固定,因此对应方向实现平分,可以实现水
平和垂直方向上的居中。(3)利用绝对定位,先将元素的左上角通过top:50%和left:50%定位到页面的中心,然后再通过margin负值来调整元素
的中心点到页面的中心。(4)利用绝对定位,先将元素的左上角通过top:50%和left:50%定位到页面的中心,然后再通过translate来调整元素
的中心点到页面的中心。(5)使用flex布局,通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对
齐,然后它的子元素也可以实现垂直和水平的居中。对于宽高不定的元素,上面的后面两种方法,可以实现元素的垂直和水平的居中。

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

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

相关文章

基于ssm铁岭河医院医患管理系统论文

摘 要 21世纪的今天,随着社会的不断发展与进步,人们对于信息科学化的认识,已由低层次向高层次发展,由原来的感性认识向理性认识提高,管理工作的重要性已逐渐被人们所认识,科学化的管理,使信息存…

logback的使用

1 logback概述 SLF4J与其它日志组件调用关系图如下所示。 SLF4J,即Java中的简单日志门面(Simple Logging Facade for Java),不是具体的日志解决方案,它只服务于各种各样的日志系统。 SLF4J最常用的日志实现框架是&am…

2023 CCF中国软件大会(CCF ChinaSoft) “区块链可靠性分析”论坛成功召开

2023年12月1日上午,2023年度CCF中国软件大会区块链可靠性分析论坛成功召开。 本次论坛由中山大学郑子彬、澳门科技大学张涛、中科院软件所蔡彦和中山大学陈嘉弛四位老师联合组织举办。本论坛重点关注区块链可靠性,邀请了近年来在区块链可靠性研究方面有先…

【postgresql】ERROR: INSERT has more expressions than target columns

执行下面sql insert into apply_account_cancellation3 select * from pply_account_cancellation; 返回下面错误信息 insert into apply_account_cancellation3 select * from apply_account_cancellation > ERROR: INSERT has more expressions than target colu…

【Rust】第二节:入门(如入)

1 说明 包含"Hello, world!“以及"Hello, cargo!” 环境:MacOS 2 Hello world 2.1 运行 1、建一个目录 2、用vscode打开 3、新建文件main.js 4、输入 fn main(){println!("Hello, world!"); }5、打开终端,执行rustc main.rs 6、…

Java:字节流 文件输出与读入方法 并 实现文件拷贝

文章目录 字节 流FileOutputStream换行 与 续写FileInputstream实现 文件拷贝(字节数组 读入方法)字节流 编码 字节 流 FileOutputStream 创建对象,指定位置(产生数据传输通道) 参数可以是File对象,也可以…

特征驱动开发

FDD 方法来自于一个大型的新加坡银行项目。FDD 的创立者 Jeff De Luca 和 Peter Coad 分别是这个项目的项目经理和首席架构设计师。在 Jeff 和 Peter 接手项目时,客户已经经历了一次项目的失败,从用户到高层都对这个项目持怀疑的态度,项目组士…

mysql面试题——日志

一:为什么需要REDO日志 缓冲池可以帮助我们消除CPU和磁盘之间的鸿沟,checkpoint机制可以保证数据的最终落盘,然而由于checkpoint 并不是每次变更的时候就触发 的,而是master线程隔一段时间去处理的。所以最坏的情况就是事务提交后…

持续集成交付CICD:Jenkins配置Nexus制品发布

目录 一、实验 1.Jenkins配置Nexus制品发布 一、实验 1.Jenkins配置Nexus制品发布 (1)策略 发布其实就是下载制品,然后将制品发送到目标主机,最后通过脚本或者指令启动程序。 (2)安装Maven Artifact …

前端知识(十一)———js判断上传的文件是GBK编码还是UTF-8

1、获取文件二进制数据,这里只做示例,例如element-ui中文件上传的beforeUpload方法,返回的file对象,然后使用FileReader对其进行转换,再进行后续判断 function beforeUpload(file: File) { const reader new FileRe…

uniapp图片预览

用的是Uview组件库里面的 直接在页面写上&#xff1a; <u-album singleSize"100" :urls"[https://lxt.jingyi.icu/item.img]"></u-album> 这图片路径是我自己的 你们可以按照组件库里面的方法去实现

DataFrame的使用

查看数据类型及属性 # 查看df类型 type(df) # 查看df的shape属性&#xff0c;可以获取DataFrame的行数&#xff0c;列数 df.shape # 查看df的columns属性&#xff0c;获取DataFrame中的列名 df.columns # 查看df的dtypes属性&#xff0c;获取每一列的数据类型 df.dtypes df.i…

标准成本核算基础知识 – 了解间接费用成本流程 - Part4

原文地址&#xff1a;Basics of Standard Costing – Understanding overhead cost flow-Part 4 | SAP Blogs 这是我理解标准成本计算及其流程的另一篇文档的延续。 标准成本核算基础知识 - 了解成本构成结构 - 第 3 部分 管理费用是只能间接归因于产品的成本&#xff0c;例如…

react中使用react-konva实现画板框选内容

文章目录 一、前言1.1、API文档1.2、Github仓库 二、图形2.1、拖拽draggable2.2、图片Image2.3、变形Transformer 三、实现3.1、依赖3.2、源码3.2.1、KonvaContainer组件3.2.2、use-key-press文件 3.3、效果图 四、最后 一、前言 本文用到的react-konva是基于react封装的图形绘…

基础课20——从0-1客服机器人生命周期

温馨提示&#xff1a;篇幅较长&#xff0c;可点击目录查看对应节点。 1.机器人搭建期 搭建机器人包含&#xff1a;素材整理、问题提炼、相似问题补充、答案编辑、问题分配引擎等等步骤&#xff0c;不同厂商可能有所区别&#xff0c;但关键功能的实现离不开以下步骤。 1.1素材…

Flutter路由的几种用法

Flutter路由跳转 基本路由跳转 ElevatedButton(onPressed: () {//基本路由跳转Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context) {return const SearchPage();}),);},child: const Text("基本路由跳转"), ), search.dart页面 impo…

说说react的事件机制?

React的事件机制是一种用于处理用户界面事件的方式&#xff0c;它建立在原生DOM事件的基础上&#xff0c;提供了一种更高级、更一致的方式来处理事件。 1. 合成事件&#xff08;Synthetic Events&#xff09;&#xff1a;React引入了合成事件的概念&#xff0c;它是一种React自…

K8S学习指南(3)-minikube的安装

这里写自定义目录标题 简介Windows 系统安装步骤 1&#xff1a;安装 Hypervisor步骤 2&#xff1a;安装 kubectl步骤 3&#xff1a;安装 Minikube步骤 4&#xff1a;启动 Minikube CentOS 系统安装步骤 1&#xff1a;安装 Hypervisor步骤 2&#xff1a;安装 kubectl步骤 3&…

《形式语言与自动机理论(第4版)》笔记(三)

文章目录 [toc]前导《形式语言与自动机理论&#xff08;第4版&#xff09;》笔记&#xff08;一&#xff09;《形式语言与自动机理论&#xff08;第4版&#xff09;》笔记&#xff08;二&#xff09; 第四章&#xff1a;正则表达式4.1|启示4.2|正则表达式的形式定义正则表达式性…

排序算法之四:直接选择排序

1.基本思想 每一次从待排序的数据元素中选出最小&#xff08;或最大&#xff09;的一个元素&#xff0c;存放在序列的起始位置&#xff0c;直到全部待排序的数据元素排完 。 2.直接选择排序 在元素集合array[i]--array[n-1]中选择关键码最大(小)的数据元素 若它不是这组元素中的…