css入门10（extension）:垂直居中的另外几个办法

最新推荐文章于 2024-04-20 03:43:36 发布
最新推荐文章于 2024-04-20 03:43:36 发布
阅读量103 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/inch2006/article/details/80448253
版权

1、利用display属性

<html>

<head>
  <style>
    .wrapper {
      display: table;
      height: 100px;
      border-style: solid;
    }

    .cell {
      display: table-cell;
      vertical-align: middle;
    }
  </style>
</head>

<body>

  <div class="wrapper">
    <div class="cell">
      google
    </div>
  </div>

</body>

</html>

2、利用position属性

<html>

<head>
  <style>
    .content {
      position: absolute;
      top: 10%;
      height: 240px;
      margin-top: 120px;
      border-style: solid;
    }
  </style>
</head>

<body>

  <div class="content">
    google

  </div>


</body>

</html>

3、利用float？？实测没起作用？？

<html>

<head>
  <style>
    .floater {
      float: left;
      height: 50%;
      margin-bottom: -120px;
      border-style: solid;
    }

    .content {
      clear: both;
      height: 240px;
      position: relative;
      border-style: solid;
    }
  </style>
</head>

<body>

  <div class="floater">
    <div class="content">
      google

    </div>
  </div>


</body>

</html>

4、利用margin:atuo

<html>

<head>
  <style>
    .content {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      height: 240px;
      width: 70%;
      border-style: solid;
    }
  </style>
</head>

<body>
  <div class="content">
    google

  </div>

</body>

</html>

参考链接：https://www.qianduan.net/css-to-achieve-the-vertical-center-of-the-five-kinds-of-methods/



inch2006
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css教程:DIV垂直居中的办法
12-10
经过今天一翻改进，终于找出了解决DIV垂直居中的办法。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><...
CSS网页布局入门教程3：一列固定宽度居中
10-30
CSS网页布局入门教程3：一列固定宽度居中
css实现div水平，垂直居中(两种方法)
LonelySnow的博客
04-07 8457
本文转载自https://www.cnblogs.com/jiekk/p/5802147.html，个人参考着实现了效果并总结如下，如果喜欢请给原作者评论分享~ 1.引言 div的垂直水平居中应该是很常见的问题了，网上的方法也很多~总之就是要实现下图这个效果： 我们慢慢来，先看看实现这个效果真正的难点（坑）在哪里~先不说具体的实现，很多人应该都熟悉margin：0 auto这个“...
web前端开发-HTML+CSS基础入门 课程笔记
H_ustle的博客
01-28 1522
https://www.bilibili.com/video/BV1yx411d7Rc?p=3&share_source=copy_web 目录概述术语版本和兼容性开发环境的准备 概述 HTML和CSS是两门语言。 HTML+CSS+Javascript = 网页 HTML：Hyper Text Markup Language 超文本标记语言；定义网页中有什么。 CSS：Cascading Style Sheets 层叠样式表；定义网页中的东西长什么样子 如何执行HTML、CSS？ 通过浏览器内核，
sass 公用10个mixins代码块(1)
2401_84152825的博客
04-20 655
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题资料的朋友点击这里可以免费领取。战项目、讲解视频，并且会持续更新！**
php居中函数,PHP实现的自定义图像居中裁剪函数示例
weixin_35690047的博客
04-12 289
图像居中裁减的大致思路：1.首先将图像进行缩放,使得缩放后的图像能够恰好覆盖裁减区域.(imagecopyresampled ― 重采样拷贝部分图像并调整大小)2.将缩放后的图像放置在裁减区域中间.(imagecopy ― 拷贝图像的一部分)3.裁减图像并保存.(imagejpeg | imagepng | imagegif ― 输出图象到浏览器或文件)具体代码：//===============...
CSS网页布局入门教程7：二列固定宽度居中
10-30
CSS网页布局入门教程7：二列固定宽度居中
CSS网页布局：div垂直居中的各种方法
12-10
在前面的文章中我简单总结了一个“CSS在页面布局中实现div水平居中的方法”，其实水平居中实现还是比较简单的，反而垂直居中有点麻烦，因为我们设计页面的时候往往水平宽度都是固定的。因此我们有必要总结一下在页面...
python学习导航.txt
05-06
python
node-v8.3.0-linux-s390x.tar.xz
05-06
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
嵌入式微处理器设计及应用
05-06
摘要：为满足智能家居座椅的交互式运动控制需求，基于AT89S52设计了嵌入式座椅运动控制系统。使用VB.net设计了游戏手柄按键读取软件，并在此基础上设计了座椅运动控制软件，软件可分别在“手柄模式”和“鼠标模式”下与嵌入式座椅运动控制器通信，进而控制座椅进行加速、减速、正转和反转等运动；构建了控制系统实验装置，实验结果表明，“鼠标模式”下，通过鼠标点击控制软件上功能按钮可实现对座椅的准确运动控制；“手柄模式”下，游戏手柄不仅可控制座椅运动，还可同步控制电脑上运行的游戏或远程遥控车，实现浸入感较强的座椅运动娱乐应用。
2024年中国NFC RFID阅读器行业研究报告.docx
05-06
2024年中国NFC RFID阅读器行业研究报告
node-v9.9.0-linux-ppc64le.tar.xz
最新发布
05-06
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
04-18 周四 为LLM-inference项目配置GitHub CI过程记录
05-06
04-18 周四 为LLM-inference项目配置GitHub CI过程记录
2024年中国AI和机器视觉行业研究报告.docx
05-06
2024年中国AI和机器视觉行业研究报告
计算机二级【公共基础知识速学教程】.pdf
05-06
内容概要：这份资料包含了计算机二级公共基础知识速学教程的内容大纲，涵盖了数据结构与算法、程序设计基础、软件工程基础、数据库设计基础等多个章节。其中包括了算法复杂度、数据结构、栈、队列、链表、二叉树、查找、排序等内容，以及程序设计方法、软件工程概念、数据库设计原理等知识点。 适用人群：适合希望系统学习计算机二级公共基础知识的学生、计算机专业学习者、程序员、软件工程师以及对数据结构、算法和数据库设计感兴趣的人群，希望通过系统学习提升自己的计算机基础知识和技能。 使用场景及目标：该教程可用于计算机相关专业的课程学习、自学提升或备考计算机二级公共基础考试。学习者可以通过逐章学习和实践，掌握数据结构与算法、程序设计基础、软件工程基础和数据库设计基础等知识，提高自己在计算机领域的理论基础和实践能力。 其他说明：学习者在使用这份教程时，可以结合实际案例和练习题进行深入学习和巩固。建议按照章节顺序系统学习，理解各个知识点的概念和应用，并通过实践项目或练习加深对计算机基础知识的理解和掌握。通过系统学习，可以提升自己在计算机领域的专业水平和能力。
减肥管理，全球前10强生产商排名及市场份额.docx
05-06
减肥管理，全球前10强生产商排名及市场份额
04-19 周五 GitHub actions-runner 程序解释
05-06
04-19 周五 GitHub actions-runner 程序解释
css代码：子元素垂直居中
06-11
可以使用flex布局来实现子元素垂直居中，具体的CSS代码如下： ``` .parent { display: flex; align-items: center; /* 将子元素垂直居中 */ } ``` 其中，`.parent` 为父元素的类名，通过 `display: flex;` 将其...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值