1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">

 6     <title>Document</title>

 7     <style>

 8         *{

 9             padding: 0;

10             margin: 0;

11         }

12         /* 第一种 */

13         /* .po{

14             position: absolute;

15             top: 50%;

16             left: 50%;

17             width: 200px;

18             height: 200px;

19             margin-top: -100px;

20             margin-left: -100px;

21             background-color: red;

22         } */

23         /* 第二种 */

24         /* .po{

25             position: absolute;

26             top: 0;

27             left: 0;

28             right: 0;

29             bottom: 0;

30             width: 200px;

31             height: 200px;

32             margin:auto;

33             background-color: red;

34         } */

35         /* 第三种 */

36         /* .po{

37             position: absolute;

38             width: 100px;

39             height: 100px;

40             top: calc(50% - 50px);

41             left: calc(50% - 50px);

42         } */

43         /* 第四种 */

44         /* .po{

45             position: absolute;

46             width: 100px;

47             height: 100px;

48             top: 50%;

49             left: 50%;

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

51         } */

52         /* 第五种 */

53         /* .f{

54             display: flex;

55             justify-content: center;

56             align-items: center;

57             width: 300px;

58             height: 300px;

59             position:absolute;

60             background-color: aqua;

61             top: calc(50% - 150px);

62             left: calc(50% - 150px);

63         }

64         .po{

65             width: 100px;

66             height: 100px;

67             background-color: red;

68         } */

69

70         /* 总结:前三种需要知道子元素的宽高  后面2种不用知道子元素的宽高 */

71     </style>

72 </head>

73 <body>

74     <div class="f">

75         <div class="po">123</div>

76     </div>

77 </body>

78 </html>

css居中的多种方式的更多相关文章

  1. CSS居中的常用方式以及优缺点

    前言 居中是页面开发中经常遇到的问题. 使用合适的.简单的.兼容性好的居中方式是我们页面仔在整个工作生涯中都要面对的问题. text-align:center 来看这个例子,一张图片和文字进行居中.如 ...

  2. 我已经说了5种css居中实现的方式了，面试官竟然说还不够？

    这是一篇关于居中对齐方式的总结 开篇之前,先问一下大家都知道几种居中的实现方式? 面试时答出来两三个就不错了,就怕面试官还让你继续说.今天就来总结一下这些居中的方式 使用flex布局设置居中. 使用f ...

  3. CSS 布局实例系列（一）总结CSS居中的多种方法

    使用 CSS 让页面元素居中可能是我们页面开发中最常见的拦路虎啦,接下来总结一下常见的几种居中方法吧. 1. 首先来聊聊水平居中: text-align 与 inline-block 的配合 就像这样 ...

  4. CSS居中的多种方法

    1.水平居中:text-align 与 inline-block 的配合 <div id = "div_center_align"> <div id = &quo ...

  5. 各种div+css居中方式调整（转载）

    盘点8种CSS实现垂直居中水平居中的绝对定位居中技术 分类: 前端开发2013-09-11 21:06 24959人阅读 评论(3) 收藏 举报 绝对居中垂直居中水平居中CSS居中代码   目录(?) ...

  6. 【基础】这15种CSS居中的方式，你都用过哪几种？

    简言 CSS居中是前端工程师经常要面对的问题,也是基本技能之一.今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种.如有漏掉的,还会陆续的补充进来,算做是 ...

  7. 第212天：15种CSS居中的方式，最全了

    CSS居中是前端工程师经常要面对的问题,也是基本技能之一.今天有时间把CSS居中的方案整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种.如有漏掉的,还会陆续的补充进来,算做是一个备忘录 ...

  8. 常用的CSS居中方式

    1.水平居中margin 0 auto;(浮动元素除外) 这个属性在网页制作的过程中是经常被用到的,一般情况下页面的版心你就可以看到它. <style> .father { width: ...

  9. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  10. css居中那点事儿

    css居中那点事儿 在css中对元素进行水平居中是非常简单的,然而使元素垂直居中就不是一件简单的事情了,多年以来,垂直居中已经成为了CSS领域的圣杯,因为它是极其常见的需求,但是在实践中却不是一件简单 ...

随机推荐

  1. python学习_PIL的Image模块初步使用

    基本介绍: Pillow 是 Python 中较为基础的图像处理库,主要用于图像的基本处理,比如裁剪图像.调整图像大小和图像颜色处理等.与 Pillow 相比,OpenCV 和 Scikit-imag ...

  2. Java中final用法与详解

    final作为Java中经常用到的关键字,了解final的使用方法是非常有必要的. 这里从final关键字在数据域.方法和类中三个方面分析final关键字的主要用法. final应用于基本数据类型 1 ...

  3. dubbo面试题及答案

    Dubbo是什么? Dubbo是阿里巴巴开源的基于 Java 的高性能 RPC 分布式服务框架,现已成为 Apache 基金会孵化项目. 面试官问你如果这个都不清楚,那下面的就没必要问了. 官网:ht ...

  4. Redis巡检检查 redis-check-aof

    一.AOF1.AOF  是什么以日志的形式来记录每个写操作,将Redis执行过的所有写指令记录下来(读操作不记录),只许追加文件但不可以改写文件,Redis启动之初会读取该文件重新构建数据,换言之,R ...

  5. MySQL中为什么要使用索引合并(Index Merge)？

    本文分享自华为云社区<[华为云MySQL技术专栏]MySQL中为什么要使用索引合并(Index Merge)?>,作者:GaussDB 数据库. 在生产环境中,MySQL语句的where查 ...

  6. 解决方案 | pywintypes.com_error: (-2147221005, '无效的类字符串', None, None) --Python连接CAD报错真正解决思路！

    1 背景 import pythoncom import win32com.client import math wincad = win32com.client.Dispatch("Aut ...

  7. <script> 和 <script setup> 的一些主要差别

    <script setup> 是 Vue 3 中的新特性,它是一种简化和更具声明性的语法,用于编写组件的逻辑部分.相比之下,<script> 是 Vue 2 中常用的编写组件逻 ...

  8. 阅读翻译Mathematics for Machine Learning之2.6 Generating Set and Basis

    阅读翻译Mathematics for Machine Learning之2.6 Generating Set and Basis 关于: 首次发表日期:2024-07-19 Mathematics ...

  9. TIER 2: Archetype

    TIER 2: Archetype 扫描 nmap 使用 nmap 进行扫描目标 IP,发现目标是 Windows 服务器,开放 SMB 和 SQL Server 服务. SMB SMB 之前已经接触 ...

  10. 手写数字识别-使用TensorFlow构建和训练一个简单的神经网络

    下面是一个具体的Python代码示例,展示如何使用TensorFlow实现一个简单的神经网络来解决手写数字识别问题(使用MNIST数据集).以下是一个完整的Python代码示例,展示如何使用Tenso ...