在html中如何使div在页面中居中显示

2023-11-02

在html中如何使div在页面中居中显示

最近无聊中又再温习了下html,发现好多东西都忘了。尝试着写了一个html网页,结果就连div如何在页面中居中显示都查了好久才弄出来。其实我不知道为什么这样可以实现,因为css还没仔细研究过,等我参加完复试定会仔细探究探究。既然实现了,我就先记录下来,要不然下次又忘了。代码如下(这是一个网页最外层div的css样式):

#all{
	width: 800px;
	height: 450px;
	border: 1px solid green;
	position:absolute;
    top:50%;
    left:50%;
    margin:-225px 0 0 -400px;
}

总的来说,就是绝对定位,设置宽高,top和left设为50%,margin设为:上为高度一半,左为宽度一半。
在这里插入图片描述
实现结果如图:
在这里插入图片描述
网页中绿色线条即是最外层div。

时隔一年,今天才写了这么一条博客,期待下次我的学习和动笔。


解释一下原因:因为绿色盒子采取绝对定位,无父级定位盒子,所以相对浏览器进行定位,分别相对浏览器挪动浏览器宽高的50%,所以再回退自身宽高的一半,即可实现绿色盒子在页面中水平垂直居中显示。相关文章可以参阅:子盒子在父盒子水平垂直方向居中方法总结
2020年12月17日记

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在html中如何使div在页面中居中显示 的相关文章

  • 前端学习————css实现简单登录页面

    css实现简单登录页面 一 页面展示 二 思路 1 设置背景图片 2 设置登录框框并使其处于靠右位置 3 设置登录框框内容 三 代码展示 1 HTML 2 css 一 页面展示 二 思路 1 设置背景图片 2 设置登录框框并使其处于靠右位置
  • HTML

    HTML 下拉框和文本域 文件域 1 下拉框 在平时我们填问卷或者冲浪的时候做筛选的时候都会遇到下拉框 html写一个下拉框的方式是使用select标签 name和id是默认属性
  • web前端基础:CSS背景样式

    背景样式 设置元素的背景颜色 设置元素的背景图片 background color 设置元素的背景颜色 background image 把图像设置为背景 background position 设置背景图像的起始位置 background
  • CSS更改默认滚动条的样式

    简介 默认滚动条样式又宽又粗 不太美观 一般在网页布局时会将滚动条优化 加一些圆角 改颜色 改宽高等等 此时就需要更改默认滚动条的样式 使用 将下面CSS代码放在全局CSS文件 全局滚动条的样式都会改为自定义设置的样式 只想修改局部某个页面
  • css flex布局 —— 项目属性 flex-grow

    flex grow 属性定义项目的放大比例 解决的问题是 在空间有多余时把多余空间分配给各个子元素 flex grow 的值默认为 0 也就是说 如果存在剩余空间 也不放大 flex grow 取值为非负数 如果取值为负数那么和0的取值效果
  • css web页面实现一个弹窗

    div 基本层级 div class pc invest join container div class bg wrap div class place hold div div class top container div class
  • vue——组件中的样式改变方法

    一般我们自己封装的组件或者组件库 element vant antdesign 中的样式在页面中必要的时候需要改变时 解决方法如下 解决方法 在页面中重新写一个 不要改成局部的 scope 页面中全局修改 在上一部的中 改变组件样式时 要先
  • HTML基础

    超文本标记语言 英语 HyperText Markup Language 简称 HTML 是一种用来结构化 Web 网页及其内容的标记语言 网页内容可以是 一组段落 一个重点信息列表 也可以含有图片和数据表 正如标题所示 本文将对 HTML
  • CSS_高度自动过渡 auto height

    方法一 grid 布局中的 fr 单位 推荐使用 div class wrap div
  • css 盒模型

    css 盒模型 html元素可以看成一个盒子 包括 边框 编剧 填充和实际内容 盒子模型 Box Model Margin 外边距 清除边框区域 Margin没有背景颜色 它是完全透明的 Border 边框 边框周围的填充和内容 Paddi
  • 在html中如何使div在页面中居中显示

    在html中如何使div在页面中居中显示 最近无聊中又再温习了下html 发现好多东西都忘了 尝试着写了一个html网页 结果就连div如何在页面中居中显示都查了好久才弄出来 其实我不知道为什么这样可以实现 因为css还没仔细研究过 等我参
  • css3 flex 实现常见页面布局

    css3 flex 实现常见页面布局 上中下布局 左中右三列布局 圣杯布局 Flex是Flexible Box的缩写 意为 弹性布局 用来为盒状模型提供最大的灵活性 任何一个容器都可以指定为Flex布局 box display flex 行
  • html 浏览器存储方式

    浏览器有三种本地存储方式 1 localstorage 2 sessionStorage 3 cookie 浏览器 F12 打开调试模式 可以看到 点击对应域名 可以看到当前域名下存储的数据 是以key value形式存储的 三种方式的共同
  • css 实现表单验证效果

    实例
  • CSS_IOS适配状态栏和IOS底部安全区域

    状态栏 var status bar height 计算属性 height calc var status bar height 343px 底部安全区 先constant再env constant safe area inset bott
  • HTML学习(二)HTML基础

    以这个为例 h1 我的第一个标题 h1 p 我的第一个段落 p DOCTYPE 前用来申明这是一个html 这里的html不区分大小写 HTML标题 HTML 标题 Heading 是通过 h1 h6 标签来定义的 h1 1级标题 h1 H
  • css flex布局 —— 容器属性 flex-wrap

    flex wrap属性 默认情况下 项目都排在一条线 又称 轴线 上 flex wrap属性定义 如果一条轴线排不下 如何换行 语法 box flex wrap nowrap wrap wrap reverse flex wrap 取值有三
  • Web前端学习(二)HTML和CSS的关系

    此节 应该上手写第一个Web网页Hello World 这在之前学习HTML基础的时候已经写过了 这里不多说 本节 主要看一下HTML和CSS之间是怎么协同工作的 话不多说直接上代码 例 为Hello World添加样式
  • 尚硅谷CSS选择器练习之餐厅练习

    此笔记来自于跟尚硅谷老师学习 此篇是对CSS选择器的总结以及视频中的P37的餐厅练习自己做的答案 自己所写 用于自我复习 P37尚硅谷 餐厅练习 https flukeout github io 目录 css选择器 1 Select the
  • ThinkPHP 关闭调试模式

    ThinkPHP有专门为开发过程而设置的调试模式 开启调试模式后 会牺牲一定的执行效率 但方便了不少 同时除错功能也非常值得 开启调试模式 config app php 文件 return 应用名称 app name gt 应用地址 app

随机推荐

  • AssetsBundle资源包的打包和加载

    如何打Assetsbundle资源包呢 这样 using UnityEditor using UnityEngine public class BuildAssetBundle
  • openmv图像识别:宝藏多颜色图形同时识别

    前言 最近参加了光电赛 校赛运气不好碰到铁板被淘汰了 emmm 我是大一学硬件的的 负责的是宝藏识别部分 好歹花了好几天学python 研究openmv写出来的代码 即使没啥技术性 我也不甘心就这么没了 发出来记录一下 目录 零 预备知识
  • 物联网【劲爆发现】免费云服务平台,AP透传,Web透传,ESP8266,Hex格式数据

    劲爆发现 免费云服务平台 AP透传 Web透传 ESP8266 Hex格式数据 安卓一键配置 今日 闲暇 发布一个免费的云服务器 供大家测试 先上图 看看如何使用吧 1 先从附件下载Esp8266固件及其下载工具 如下图 链接 http p
  • 单链表的冒泡排序

    当采用冒泡排序时 每一个元素与后一个元素比较 若这个元素小于后一个元素 则交换这两个元素的位置 外层循环n 1次 内循环n 1 i次 首先定义结构体指针stu p q tail p L 让p指向L L是首元结点 Int count 0 先循
  • 一些好的学习网址

    地址 http chs gotdotnet com quickstart 描述 本站点是微软 NET技术的快速入门网站 我们不必再安装 NET Framework中的快速入门示例程序 直接在网上查看此示例即看 名称 微软官方 NET指导站点
  • npm常用命令学习(npm install -D,semver版本规范, npm进行版本管理的最佳实践用法)...

    什么是npm npm有两层含义 一层含义是Node的开放式模块登记和管理系统 网址为npmjs org 另一层含义是Node默认的模块管理器 是一个命令行下的软件 用来安装和管理Node模块 npm不需要单独安装 在安装Node的时候 会连
  • Qt事件处理机制整个流程--以鼠标在一个窗口中点击为例

    转载自 http mobile 51cto com symbian 272812 htm 在此谢谢原作者的分享 第一部分 本篇来介绍Qt 事件处理机制 深入了解事件处理系统对于每个学习Qt人来说非常重要 可以说 Qt是以事件驱动的UI工具集
  • 华为OD机试真题-需要打开多少监控器-2023年OD统一考试(B卷)

    题目描述 某长方形停车场 每个车位上方都有对应监控器 当且仅当在当前车位或者前后左右四个方向任意一个车位范围停车时 监控器才需要打开 给出某一时刻停车场的停车分布 请统计最少需要打开多少个监控器 输入描述 第一行输入m n表示长宽 满足1
  • python实现天气数据爬取实现数据可视化和天气查询gui界面设计

    在学校大一实训中 我的实训项目就是使用python爬取天气数据并且实现gui图形界面的设计 实训结束了 希望自己的代码可以帮助大家的学习 代码是大一时候写的 比较青涩 大家多包涵 第一个部分是getdata的部分 就是爬取数据 并将数据存放
  • 刷脸支付有可以大规模落地的商用前景

    科技的高频创新牵引着公众行为发生着快速切换与升级 当人们还沉浸在扫码支付的便利场景中时 刷脸支付作为一种全新的支付方式已不期而至 同时 针对刷脸支付可能大规模落地商用的前景 围绕其便捷性与安全性所展开的舆论博弈也不断被推向高潮 目前刷脸支付
  • vue.config.js中的配置

    兼容性问题 const defineConfig require vue cli service module exports defineConfig node modules里的依赖默认是不会编译的 会导致es6语法在ie中的语法报错
  • 今天第一次用dubbo写一个提供者,消费者,记录一下

    随笔 自己记录一下 一 先创建一个maven项目 dubbo pom 里面包含两个module dubbo api 和 dubbo consumer 如下 dubbo pom xml
  • 嵌入式开发(S5PV210)——u-boot中如何确定启动方式

    1 嵌入式设备确认启动方式 设备确认启动方式分为硬件方式和软件方式 硬件方式是通过芯片某几个引脚的高低电平来决定启动方式 软件方式就是通过代码设置来决定启动方式 1 硬件方式 比如S5PV210芯片 通过拨码开关去设置芯片引脚的高低电平来设
  • 正则表达式判断字符串是否包含中文

    正则表达式通常被用来检索 替换那些符合某个模式 规则 的文本 Regex regex new Regex u4e00 u9fa5 string str 48445helloWorld regex IsMatch str ToString b
  • windows上的neo4j 数据迁移

    需求 把windowsA上的neo4j中graph库相关数据 同步到 windowsB上的neo4j 上 解答 步骤如下 1 首先把windowsA windowsB上的neo4j服务停掉 2 进入windowsA上的neo4j的data目
  • Python生成器generator之next和send运行流程

    http blog csdn net pfm685757 article details 49924099 运行流程 yield from iterable本质上等于for item in iterable yield item的缩写版 转
  • 安装visio64位,无法安装,需要卸载32位问题

    最近买了新电脑 在准备安装visio的时候出现了这个问题 只需要下载一个注册表自动清理器 链接 https pan baidu com s 1eNit u1dLAYC3BBL9u1auA 提取码 kho7 下载后直接打开 点击 一键解决此问
  • 创建docker容器时设置hosts内容

    方式1 在使用docker run运行一个新的容器的时候 通过参数 add host来添加域名和IP信息到容器的 etc hosts文件中 例如 docker run add host hostname 111 111 111 1 name
  • 在Mac OS中配置CMake的详细图文教程

    CMake是一个比make更高级的跨平台的安装 编译 配置工具 可以用简单的语句来描述所有平台的安装 编译过程 并根据不同平台 不同的编译器 生成相应的Makefile或者project文件 本文主要介绍在Mac OSX上安装配置CMake
  • 在html中如何使div在页面中居中显示

    在html中如何使div在页面中居中显示 最近无聊中又再温习了下html 发现好多东西都忘了 尝试着写了一个html网页 结果就连div如何在页面中居中显示都查了好久才弄出来 其实我不知道为什么这样可以实现 因为css还没仔细研究过 等我参