css居中的多种方式
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居中的多种方式的更多相关文章
- CSS居中的常用方式以及优缺点
前言 居中是页面开发中经常遇到的问题. 使用合适的.简单的.兼容性好的居中方式是我们页面仔在整个工作生涯中都要面对的问题. text-align:center 来看这个例子,一张图片和文字进行居中.如 ...
- 我已经说了5种css居中实现的方式了，面试官竟然说还不够？
这是一篇关于居中对齐方式的总结 开篇之前,先问一下大家都知道几种居中的实现方式? 面试时答出来两三个就不错了,就怕面试官还让你继续说.今天就来总结一下这些居中的方式 使用flex布局设置居中. 使用f ...
- CSS 布局实例系列（一）总结CSS居中的多种方法
使用 CSS 让页面元素居中可能是我们页面开发中最常见的拦路虎啦,接下来总结一下常见的几种居中方法吧. 1. 首先来聊聊水平居中: text-align 与 inline-block 的配合 就像这样 ...
- CSS居中的多种方法
1.水平居中:text-align 与 inline-block 的配合 <div id = "div_center_align"> <div id = &quo ...
- 各种div+css居中方式调整（转载）
盘点8种CSS实现垂直居中水平居中的绝对定位居中技术 分类: 前端开发2013-09-11 21:06 24959人阅读 评论(3) 收藏 举报 绝对居中垂直居中水平居中CSS居中代码 目录(?) ...
- 【基础】这15种CSS居中的方式，你都用过哪几种？
简言 CSS居中是前端工程师经常要面对的问题,也是基本技能之一.今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种.如有漏掉的,还会陆续的补充进来,算做是 ...
- 第212天：15种CSS居中的方式，最全了
CSS居中是前端工程师经常要面对的问题,也是基本技能之一.今天有时间把CSS居中的方案整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种.如有漏掉的,还会陆续的补充进来,算做是一个备忘录 ...
- 常用的CSS居中方式
1.水平居中margin 0 auto;(浮动元素除外) 这个属性在网页制作的过程中是经常被用到的,一般情况下页面的版心你就可以看到它. <style> .father { width: ...
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
- css居中那点事儿
css居中那点事儿 在css中对元素进行水平居中是非常简单的,然而使元素垂直居中就不是一件简单的事情了,多年以来,垂直居中已经成为了CSS领域的圣杯,因为它是极其常见的需求,但是在实践中却不是一件简单 ...
随机推荐
- 推荐一款基于业务行为驱动开发（BDD）测试框架：Cucumber！
大家好,我是狂师. 今天给大家介绍一款行为驱动开发测试框架:Cucumber. 1.介绍 Cucumber是一个行为驱动开发(BDD)工具,它结合了文本描述和自动化测试脚本.它使用一种名为Gherki ...
- python中globals()的用法
python中globals()的用法 1. 获取所有的全局变量, 获取到的内容如下: {'__name__': '__main__', '__doc__': None, '__package__': ...
- ClickHouse介绍（一）初次使用
ClickHouse使用 ClickHouse是一个面向列存储的OLAP分析数据库,以其强大的分析速度而闻名.有关ClickHouse的介绍可以参考其官网说明[1].本文主要介绍它的基本使用. 1. ...
- Swoole v6 能否让 PHP 再次伟大？
大家好,我是码农先森. 现状 传统的 PHP-FPM 也是多进程模型的的运行方式,但每个进程只能处理完当前请求,才能接收下一个请求.而且对于 PHP 脚本来说,只是接收请求和响应请求,并不参与网络通信 ...
- 『vulnhub系列』Deathnote-1
『vulnhub系列』Deathnote-1 下载地址: https://www.vulnhub.com/entry/deathnote-1,739/ 信息搜集: 使用nmap扫描存活主机,发现主机开 ...
- ubuntu podman相关
前言 记录podman的安装.配置以及一些常用操作,会不定时更新: 正文 1. podman 安装以及配置 ubuntu 安装 podman sudo apt update sudo apt inst ...
- 树莓派4B-PCA9685驱动舵机
前言 不知道你们有没有遇到过这么一种情况,直接用树莓派的引脚输出PWM控制舵机,舵机是会出现抖动的.就算代码进行一定的时延迟优化还是会有影响的. 现在我们可以使用PCA9685这个模块去驱动舵机. P ...
- mac 安装mysql5.7.28附安装包
mac 安装mysql教程 下载mysql安装包 百度云盘地址: https://pan.baidu.com/s/1qbF8vtON2sLzNetXCITnSQ 运行安装包 一直下一步即可 配置环境变 ...
- 使用libzip压缩文件和文件夹
简单说说自己遇到的坑: 分清楚三个组件:zlib.minizip和libzip.zlib是底层和最基础的C库,用于使用Deflate算法压缩和解压缩文件流或者单个文件,但是如果要压缩文件夹就很麻烦,主 ...
- oeasy教您玩转vim - 87 - # 内容查找grep命令
内容查找 grep 回忆 上次我们尝试了一下各种在vi中执行外部程序 可以排序 可以改大小写 还可以用管道 直接对于缓冲buffer文件进行操作 还是很方便的 其实还有一个外部命令很重要 根据内容 ...