CSS实现垂直水平居中

于 2019-03-21 14:18:12 发布
阅读量201 收藏
点赞数
分类专栏： html css 文章标签： 垂直水平居中
html 同时被 2 个专栏收录
22 篇文章 0 订阅
订阅专栏
css
16 篇文章 0 订阅
订阅专栏

元素已知宽度

绝对定位 + margin auto + 流体特性

   <!DOCTYPE html>
   <html>
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width">
     <title>Sumon Test</title>
     <div style="background-color: yellow;
             width: 300px;
           height: 300px;
           position: relative;
           ">
       <div style="background-color: #F00;
           width: 100px;
           height: 100px;
           position: absolute;
           left: 50%;
           top: 50%;
           margin: -50px 0 0 -50px;
           ">
       </div>
     </div>
   </head>
   <body>
   
   </body>
   </html>

元素未知宽度

绝对定位 + margin auto + 流体特性

   <!DOCTYPE html>
   <html>
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width">
     <title>Sumon Test</title>
     <div style="background-color: yellow;
             width: 300px;
           height: 300px;
           position: relative;
           ">
       <div style="background-color: #F00;
           width: 100px;
           height: 100px;
           position: absolute;
           left: 0;
           top: 0;
           bottom: 0;
           right: 0;
           margin: auto;
           ">
       </div>
     </div>
   </head>
   <body>
   
   </body>
   </html>

Tips

   当一个绝对定位元素，其对立定位方向属性同时有具体定位数值的时候，流体特性就发生了。
   具有流体特性绝对定位元素的margin:auto的填充规则和普通流体元素一模一样：
   1.如果一侧定值，一侧auto，auto为剩余空间大小；
   2.如果两侧均是auto, 则平分剩余空间；

 

绝对定位 + transform反向偏移 

   <!DOCTYPE html>
   <html>
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width">
     <title>Sumon Test</title>
     <div style="background-color: yellow;
             width: 300px;
           height: 300px;
           position: relative;
           ">
       <div style="background-color: #F00;
           width: 100px;
           height: 100px;
           position: absolute;
           left: 50%;
           top: 50%;
           transform: translate(-50%, -50%);
           ">
       </div>
     </div>
   </head>
   <body>
   
   </body>
   </html>

flex布局 

   <!DOCTYPE html>
   <html>
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width">
     <title>Sumon Test</title>
     <div style="background-color: yellow;
             width: 300px;
           height: 300px;
           display: flex;
           justify-content: center;
           align-items: center;
           ">
       <div style="background-color: #F00;
           width: 100px;
           height: 100px;
           ">
       </div>
     </div>
   </head>
   <body>
   
   </body>
   </html>

Tips

   1.justify-content 设置水平方向的元素位置
   2.align-items 设置垂直方向的元素位置

 

 table-cell布局

   <!DOCTYPE html>
   <html>
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width">
     <title>Sumon Test</title>
     <div style="background-color: yellow;
             width: 300px;
           height: 300px;
           display: table-cell;
           vertical-align: middle;
           text-align: center;
           ">
       <div style="background-color: #F00;
           width: 100px;
           height: 100px;
           display: inline-block;
           ">
       </div>
     </div>
   </head>
   <body>
   
   </body>
   </html>

Tips

  1.vertical-align 设置元素的垂直对齐方式
  2.text-align 设置元素中的文本的水平对齐方式

 

 

栗子i维C
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
eclipse本地的jar包配置Junit环境
07-23
用于在eclipse中导入本地的jar包配置Junit环境，版本应该是JUnit4， 配置详情可参照我的博文：http://t.csdnimg.cn/GaqTZ
龙飞嵌入式POS餐饮应用方案介绍.doc
07-23
嵌入式
Struts 2.0 Java归档库文件包
07-23
Struts2.0是Java Web开发中非常重要的一个框架，它是Apache软件基金会的Jakarta项目下的一个产品。这个框架主要用于构建MVC（Model-View-Controller）架构的应用程序，为开发者提供了一种组织应用程序结构、处理HTTP请求以及展示数据的方式。在本压缩包中，包含的是一些Struts2.0的核心jar包、源代码和实例，这些内容对于学习和理解Struts2.0的工作原理和实际应用是非常有帮助的。 我们来详细解析一下Struts2.0的关键知识点： 1. **MVC模式**：Struts2.0基于MVC设计模式，它将应用程序的逻辑分为三个部分——模型（Model）、视图（View）和控制器（Controller）。模型负责业务逻辑，视图负责数据显示，控制器负责接收用户请求并调用相应的模型方法，更新视图。 2. **Action类**：在Struts2中，Action类是处理业务逻辑的核心组件。开发者需要创建Action类，并实现execute()方法，该方法会响应用户的请求，执行相应的业务操作。 3. **配置文件**：Struts2使用XML配
分拣设备_包括零件图_机械3D图可修改打包下载.zip
07-23
分拣设备_包括零件图_机械3D图可修改打包下载.zip
springcloud：Config配置中心demo源码案例演示
07-23
springcloud：Config配置中心demo源码案例演示
课程设计源码、报告资源
07-23
课程设计源码和报告资源是学生们在完成课程设计时经常需要寻找的重要资料。这些资源可以帮助学生理解课程设计的要求，掌握相关的编程技能，并最终完成符合要求的课程设计作品。以下是一些获取课程设计源码和报告资源的途径： 一、学校资源 课程资料： 大多数学校会在课程开始时提供相关的教材、课件和参考资料，其中可能包含课程设计的示例源码和报告模板。 学生可以积极利用这些资源，从中获取灵感和指导。 图书馆： 学校的图书馆通常收藏有大量的专业书籍和期刊，其中可能包含与课程设计相关的源码和报告。 学生可以通过图书馆的检索系统查找相关资源，并借阅或复印使用。 实验室和机房： 学校的实验室和机房往往配备有专业的软件和硬件设备，学生可以在这里进行课程设计的实践操作。 同时，实验室和机房也可能存放有往届学生的课程设计作品和源码，供学生参考和学习。 二、网络资源 在线课程平台： 如慕课网（MOOCs）、网易云课堂等在线课程平台提供了丰富的课程资源，其中可能包含与课程设计相关的视频教程、源码和报告示例。 学生可以根据自己的需求选择合适的课程进行学习，并参考其中的源码和报告。 开源社区和代码托管平台： 开源社区如Git
b055艺体培训机构业务管理系统-springboot+vue+elementui.zip（可运行源码+sql文件+文档）
07-23
艺体培训机构业务管理系统在对开发工具的选择上也很慎重，为了便于开发实现，选择的开发工具为Eclipse，选择的数据库工具为Mysql。以此搭建开发环境实现艺体培训机构业务管理系统的功能。其中管理员管理用户，新闻公告。 艺体培训机构业务管理系统是一款运用软件开发技术设计实现的应用系统，在信息处理上可以达到快速的目的，不管是针对数据添加，数据维护和统计，以及数据查询等处理要求，艺体培训机构业务管理系统都可以轻松应对。 学员信息管理页面，此页面提供给管理员的功能有：学员信息的查询管理，可以删除学员信息、修改学员信息、新增学员信息，还进行了对用户名称的模糊查询的条件。课程信息管理页面，此页面提供给管理员的功能有：查看已发布的课程信息数据，修改课程信息，课程信息作废，即可删除，还进行了对课程信息名称的模糊查询 课程信息信息的类型查询等等一些条件。活动信息管理页面，此页面提供给管理员的功能有：根据活动信息进行条件查询，还可以对活动信息进行新增、修改、查询操作等等。公告信息管理页面，此页面提供给管理员的功能有：根据公告信息进行新增、修改、查询操作等等。
运用YOLOv5模型进行垃圾类别目标识别
07-23
本项目采用YOLOv5实现垃圾分类目标检测。利用大量已标注目标检测数据集进行训练，对居民生活垃圾图片进行检测，找出图片中属于哪个类别的垃圾，并指示出在图片中的位置。 本工程YOLOv5使用PyTorch版的ultralytics/yolov5，在Windows系统上进行垃圾分类目标检测的项目演示。具体项目过程包括：数据集及格式转换、探索性数据分析（EDA）、安装软件环境、安装YOLOv5、修改YOLOv5代码(为支持中文标签）、训练集和测试集自动划分、修改配置文件、准备Weights&Biases训练可视化工具、训练网络模型、测试训练出的网络模型和性能统计。。内容来源于网络分享，如有侵权请联系我删除。另外如果没有积分的同学需要下载，请私信我。
探索Python的迭代世界：迭代器与生成器全解析
07-23
Python是一种广泛使用的高级编程语言，由Guido van Rossum于1989年底发明，第一个公开发行版发行于1991年。Python的设计哲学强调代码的可读性和简洁的语法（尤其是使用空格缩进来区分代码块，而不是使用大括号或关键词）。这使得Python被认为是一种易于学习的语言，同时具备强大的功能，适合初学者和经验丰富的程序员。 Python的主要特点包括： 1. **易于学习**：Python有相对较少的关键字，结构简单，和一个明确定义的语法。 2. **易于阅读**：Python代码定义的清晰度使得它像可执行伪代码。 3. **易于维护**：Python的成功在于它的源代码是相当容易维护的。 4. **广泛的标准库**：Python的标凑库很庞大，包含用于互联网通信、网络通信、数据压缩、加密、系统管理等的模块。 5. **跨平台**：Python可以在多种操作系统上运行，包括但不限于Windows、Mac OS X、Linux等。 6. **解释型语言**：Python是一种解释型语言，这意味着开发过程中没有编译步骤。 7. **动态类型系统**：Python不会在编写
代码随想录训练营第五天
最新发布
07-23
代码随想录训练营第五天
海康嵌入式笔试题.doc
07-23
嵌入式
深入解析COM技术核心，资源由网络分享整理，如有侵权请联系我
07-23
COM（Component Object Model）技术是微软推出的一种组件对象模型，它允许不同应用程序之间的软件组件进行交互。本书“COM技术内幕”深入浅出地探讨了COM的核心概念、设计原则以及实现方法，是系统学习COM的宝贵资源。以下是关于COM技术的一些关键知识点： 1. **COM基础**：COM是一个二进制标准，定义了组件之间如何通信，它独立于编程语言，使得不同语言编写的组件可以无缝协作。COM组件是自我描述的，通过接口来提供服务，并且支持多线程和跨进程通信。 2. **接口**：在COM中，接口是一组方法的集合，定义了组件的行为。每个接口都由一个唯一的接口ID（IID）标识，客户端通过IID调用组件的方法。接口是纯虚的，不允许包含数据成员。 3. **组件注册**：COM组件在系统中使用注册表进行注册，这使得系统知道组件的位置和存在。注册信息包括组件的类ID（CLSID）、接口ID、服务器类型（本地或远程）等。 4. **类工厂**：COM组件通过类工厂（Class Factory）实例化，类工厂负责创建组件的实例。客户端通过接口调用类工厂的CreateInsta
Ruby编程语言简介，资源由网络分享整理，如有侵权请联系我
07-23
Ruby是一种面向对象的、动态类型的编程语言，由日本的松本行弘(Yukihiro Matsumoto)于1995年设计并开发。它强调简洁、优雅的语法，旨在提高程序员的生产力，使代码更易读、易写。Ruby语言在设计时就考虑到了人性化，它的哲学是“人比计算机更重要”。 Ruby的基础知识包括以下几个方面： 1. **变量**：Ruby中的变量分为五种类型，分别是局部变量（以小写字母或下划线开头）、实例变量（以`@`开头）、类变量（以`@@`开头）、全局变量（以`$`开头）和常量（以大写字母开头）。它们各自有不同的作用域和用途。 2. **数据类型**：Ruby支持多种数据类型，如字符串(String)、整数(Integer)、浮点数(Float)、布尔值(Boolean)、数组(Array)、哈希(Hash)、符号(Symbol)等。其中，哈希是Ruby的一大特色，它以键值对的形式存储数据。 3. **控制结构**：包括条件语句（如if/else、unless、case/when）和循环（如for、while、until、each）。Ruby还提供了块（block）和 Proc 对
C语言数据结构：基于EasyX的飞机订票系统，有前端界面
07-23
C语言数据结构：基于EasyX的飞机订票系统，有前端界面
精选30款传统网页设计模板
07-23
网页设计对用户体验和视觉效果至关重要，“30套经典网页设计模板”助力高效创建网站。这套资源为新手和专家提供预置页面结构、色彩、字体及交互元素，简化设计过程。遵循设计原则，确保界面清晰易用，适配各类网页如企业、电商或个人站点。特色包括响应式布局适应多屏，精心挑选的色彩激发情感，优质字体与图像增强视觉，清晰导航助用户探索，交互设计提升操作感，考虑SEO优化，代码规范利于维护，支持个性化调整，跨浏览器兼容，是学习和创新设计的理想素材。 简言之，此套模板集是学习与实践网页设计的宝贵资料，既适合初学者掌握基础，也便于专业人员快速启动项目。。内容来源于网络分享，如有侵权请联系我删除。另外如果没有积分的同学需要下载，请私信我。
个人单页简历素材-活泼单页09.docx
07-23
【简历模板】工作总结、商业计划书、述职报告、读书分享、家长会、主题班会、端午节、期末、夏至、中国风、卡通、小清新、岗位竞聘、公司介绍、读书分享、安全教育、文明礼仪、儿童故事、绘本、防溺水、夏季安全、科技风、商务、炫酷、企业培训、自我介绍、产品介绍、师德师风、班主任培训、神话故事、巴黎奥运会、世界献血者日、防范非法集资、3D快闪、毛玻璃、人工智能等等各种样式的ppt素材风格。 设计模板、图片素材、PPT模板、视频素材、办公文档、小报模板、表格模板、音效配乐、字体库。 广告设计：海报，易拉宝，展板，宣传单，宣传栏，画册，邀请函，优惠券，贺卡，文化墙，标语，制度，名片，舞台背景，广告牌，证书，明信片，菜单，折页，封面，节目单，门头，美陈，拱门，展架等。 电商设计：主图，直通车，详情页，PC端首页，移动端首页，钻展，优惠券，促销标签，店招，店铺公告等。 图片素材：PNG素材，背景素材，矢量素材，插画，元素，艺术字，UI设计等。 视频素材：AE模板，会声会影，PR模板，视频背景，实拍短片，音效配乐。 办公文档：工作汇报，毕业答辩，企业介绍，总结计划，教学课件，求职简历等PPT/WORD模板。
基于SpringBoot+Vue+Element-UI的前后端分离学生信息管理系统
07-23
基于SpringBoot+Vue+Element-UI的前后端分离学生信息管理系统
MSP4305529控制AD7606C读取模拟量
07-23
使用TI单片机MSP4305529LP来控制AD7606C读取模拟量数据,如电压值,AD7606C支持正负电压值读取,同时将读取信息显示在0.96寸OLED上方便查看
.gitignore 文件是一个文本文件，位于项目的根目录下（或者任何子目录下，但通常放在根目录下以管理整个项目的忽略规则）
07-23
使用 .gitignore 文件的主要目的是让版本控制系统（如 Git）忽略掉一些不需要追踪的文件，比如编译生成的中间文件、临时文件、敏感信息文件（如密码文件、密钥文件等）、或者是一些大型的文件和目录（如日志文件、下载的依赖库等），这些文件通常不需要被版本控制跟踪，因为它们要么是由其他文件生成的，要么是项目之间共享的，或者包含敏感信息。 .gitignore 文件中的每一行都指定了一个匹配模式，Git 会根据这些模式来忽略文件。匹配模式可以使用 shell 的 glob 模式（如 *.log 匹配所有以 .log 结尾的文件），也可以使用正则表达式（但 Git 的 .gitignore 文件并不直接支持完整的正则表达式，而是使用了一种简化的模式匹配规则）。
css实现垂直水平居中
04-29
要实现CSS中的垂直水平居中，可以使用以下几种方法： 1. 使用Flexbox布局： 可以通过设置父容器的display属性为flex，并使用justify-content和align-items属性来实现垂直水平居中。具体代码如下： ```css ....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值