CSS实现元素水平垂直居中几种方案

方案一:利用 display: inline-block; vertical-align: middle;

<div class="box">

    <div></div>

    <span></span>

</div>

.box {

  width: 500px;

  height: 500px;

  background-color: red;

  text-align: center;

}

.box div {

  width: 200px;

  height: 200px;

  background-color: orange;

  display: inline-block;

  vertical-align: middle;

}

.box span {

  width: 0;

  height: 100%;

  display: inline-block;

  vertical-align: middle;

}

方案二:定位法(1)

<div class="box">

      <div></div>

</div>

.box {

  width: 500px;

  height: 500px;

  background-color: red;

  position: relative;

}

.box div {

  width: 200px;

  height: 200px;

  background-color: orange;

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  margin: auto;

}

 方案三:定位法(2)

<div class="box">

      <div></div>

</div>

.box {

  width: 500px;

  height: 500px;

  background-color: red;

  position: relative;

}

.box div {

  width: 200px;

  height: 200px;

  background-color: orange;

  position: absolute;

  left: 50%;

  top: 50%;

  margin-left: -100px;

  margin-top: -100px;

}

方案四: 弹性布局

<div class="box">

      <div></div>

</div>

.box {

  width: 500px;

  height: 500px;

  background-color: red;

  display: flex;

  justify-content: center;

  align-items: center;

}

.box div {

  width: 200px;

  height: 200px;

  background-color: orange;

}

方案五:利用 display: table-cell; vertical-align: middle; 

<div class="box">

      <div></div>

</div>

.box {

  width: 500px;

  height: 500px;

  background-color: red;

  display: table-cell;

  vertical-align: middle;

  text-align: center;

}

.box div {

  width: 200px;

  height: 200px;

  background-color: orange;

  display: inline-block;

}

方案六:利用translate位移

<div class="box">

      <div></div>

</div>

.box {

  width: 500px;

  height: 500px;

  background-color: red;

  position: relative;

}

.box div {

  width: 200px;

  height: 200px;

  background-color: orange;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%,-50%);

}

效果图如下:

 

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

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

相关文章

修改vscode内置Vue VSCode Snippets(代码片段)

打开插件文件夹 文件夹名是 "作者名.vscode-插件名-版本号"组成的. C:\Users\Administrator\.vscode\extensions\sdras.vue-vscode-snippets-3.1.1\snippets 打开vue.json "prefix": "vbase" 就是代码块的关键词,输入vbase就会提示代码块 …

调试ad5245的总结

调试ad5245的总结 这个ad5245是通过IIC与FPGA进行通信的&#xff0c;首先要理解IIC协议。 经验总结&#xff1a; 1、SCL和SDA端的要有上拉电阻&#xff0c;且上拉电阻能正常工作&#xff1b; 2、要往SDA数据线上写三个字节才能调节ad5245的电阻值&#xff0c;第三个字节就是…

「云渲染科普」3dmax室内装修效果图怎么高效制作

3dmax室内装修效果图拥有丰富的家具、光影、材质纹理等&#xff0c;在渲染过程过程中如果室内的场景过大&#xff0c;个人电脑通常需要渲染几个小时或者好几天&#xff0c;这对于比较急的项目来说&#xff0c;往往会影响项目的进度。下面一起来看看3dmax室内装修效果图的&#…

使用 gitee+sphinx+readthedocs 搭建个人博客

给大家安利如何快速搭建个人博客网站&#xff01; 前言 这是我本地运行的一个使用sphinx构建的博客服务&#xff0c;这些文章&#xff0c;都是用markdown写的。 一直有个想法&#xff0c;就是把自己写的这些文件&#xff0c;搞成一个博客网站&#xff0c;放到网上&#xff0c…

【C++】__declspec含义

目录 一、__declspec(dllexport)如果这篇文章对你有所帮助&#xff0c;渴望获得你的一个点赞&#xff01; 一、__declspec(dllexport) __declspec(dllexport) 是 Microsoft Visual C 编译器提供的一个扩展&#xff0c;用于指示一个函数或变量在 DLL&#xff08;动态链接库&…

学习SSM框架第四天

学习目标&#xff1a; 基于XML三层架构开发小实验 学习时间&#xff1a; 学习SSM框架第四天 周三下午 开始实验前需要理解的几个知识点&#xff1a; 0.&#x1f356;生成对象方法 a.使用静态工程类 b.实例工厂类 c.空构造方法&#xff08;IOC&#xff09;所有属性的set方…

Redis命令 - Sets命令组常用命令

Set集合&#xff0c;无序&#xff0c;一堆不重复值的组合。利用redis提供的set数据结构&#xff0c;可以存储一些集合性的数据。 使用场景&#xff1a;例如&#xff0c;实现如共同关注、共同喜好、二度好友等 1、SADD key member [member …] 向集合中添加一个或者多个成员 …

如何在simulink中怎么获取足端轨迹代码解释?

在使用Java代码框架统计用户获取足端轨迹时&#xff0c;我们可以使用Simulink的外部接口功能和Java的网络编程来实现。 首先&#xff0c;我们需要在Simulink中配置外部接口以便与Java进行通信。可以使用Simulink中的TCP/IP或UDP模块来实现网络通信。假设我们选择TCP/IP模块。 …

#AIGC##VDB# 【一篇入门VDB】矢量数据库-从技术介绍到选型方向

文章概览&#xff1a; 这篇文章深入探讨了矢量数据库的基本概念、工作原理以及在人工智能领域的广泛应用。 首先&#xff0c;文章解释了矢量的数学和物理学概念&#xff0c;然后引入了矢量在数据科学和机器学习中的应用。随后&#xff0c;详细介绍了什么是矢量数据库&#xff0…

能见度传感器有什么特点-交通安全的保障

能见度传感器是一种用于测量能见度的设备&#xff0c;通常安装在高速公路、城市道路、桥梁等交通路段&#xff0c;以及隧道、停车场等封闭空间。这种传感器能够实时监测能见度值&#xff0c;并通过数据传输系统将数据发送到控制中心或相关管理部门&#xff0c;为交通安全管理、…

C++结合OpenCV:图像的加法运算

一、图像运算 针对图像的加法运算、位运算都是比较基础的运算。但是&#xff0c;很多复杂的图像处理功能正是借助这些基础的运算来完成的。所以&#xff0c;牢固掌握基础操作&#xff0c;对于更好地实现图像处理是非常有帮助的。本章简单介绍了加法运算、位运算&#xff0c;并…

自学Python笔记总结(更新中……)

自学Python笔记总结 网址数据类型类型查看类型&#xff0c;使用type内置类标识符 输出输入语句format函数的语法及用法数据类型的转换运算符算数运算符赋值运算符的特殊场景拆包 比较运算符逻辑运算符 与 短路位运算符运算符优先级 程序流程控制分支语句pass 占位 循环语句 whi…

DFT新手入门:VASPKIT生成模版INCAR

新手学习VASP计算时一般需要自行准备好VASP所需要的四个输入文件:INCAR POSCAR KPOINTS POTCAR。 其中POSCAR为计算任务的模型文件&#xff0c;POTCAR为与POSCAR中元素所对应的赝势&#xff0c;可根据要求选取。 KPOINTS的设置需要根据精度确定&#xff0c;一般通过vaspkit的1…

实现STM32烧写程序-(4) BIN文件结构

简介 BIN文件是一种二进制文件格式&#xff0c;用于存储和传输二进制数据。它包含了计算机或设备可以直接读取和执行的原始二进制数据。BIN文件通常用于存储程序、固件或其他二进制数据&#xff0c;例如嵌入式系统的固件、操作系统的映像文件等。 BIN文件的起源可以追溯到计算机…

获取本地IP网卡信息

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、获取本地IP&#xff0c;以及全部网卡信息总结 前言 一、获取本地IP&#xff0c;以及全部网卡信息 const os require(node:os) function getIPAdress(){/…

node-red实现ModBus-RTU 通信协议(RS485信号输出)的数据交互

node-red实现485型 - 温湿度变表数据转换 一、介绍二、 通讯协议2.1 通讯基本参数2.2 数据帧格式定义2.3 寄存器地址2.4 通讯协议示例以及解释 三、 node-red实现数据交互3.1 node-red读取数据3.2 node-red写回数据 本文参考《86 壳液晶温湿度变送器使用说明书&#xff08;485 …

html5+css3+bootstrap+js 新闻网页

新闻网页练习打卡&#xff01; 一、首页 二、社会 三、财经 四、视频展示 简易新闻网站&#xff08;期末作业&#xff09;

Cuda与Torch配置(For 集群服务器)超详细步骤

每次配置模型环境&#xff0c;无论是在windows&#xff0c;linux&#xff0c;集群服务器上都会在这里卡一段&#xff0c;为了未来配置方便&#xff0c;记录下配置注意事项 配置cuda和torch主要有几个要点&#xff0c;分别是&#xff1a; 显卡与驱动&#xff08;NIVIADA drive…

一刀切转为精细化,门店如何进行「体检式」巡查(一)

在品牌经营过程中&#xff0c;无论是直营店还是加盟商&#xff0c;都需要做好统一的品牌门店管理。比如总部对门店环境卫生、员工服务质量、货品质量等进行定期或不定期的巡检抽查&#xff0c;以确保各门店保持统一标准。 以往&#xff0c;传统巡店只能通过有纸质表格或微信汇报…

前端react入门day03-react获取dom与组件通信

(创作不易&#xff0c;感谢有你&#xff0c;你的支持&#xff0c;就是我前行的最大动力&#xff0c;如果看完对你有帮助&#xff0c;请留下您的足迹&#xff09; 目录 受控表单绑定 React中获取DOM 组件通信 父传子 父传子-基础实现 父传子-props说明 父传子 - 特殊的…