div页面垂直居中方法方法

2023-10-30

基本思路:

(1) 首们需要position:absolute;绝对定位。而层的定位点,使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二

例子:一个层宽度是400,高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为-150。margin-left的值为-200。这样我们就实现了层垂直居中于浏览器的样式编写。
例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>25175.com</title>
<style type="text/css">

div {
position:absolute;
top:50%;
left:50%;
margin:-150px -200px;
width:400px;
height:300px;
border:1px solid red;
}

</style>
</head>
<body>
<div>52css.com Div CSS布局 常见问题</div>
</body>
</html> 

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

div页面垂直居中方法方法 的相关文章

  • 【H5】 svg内text、image、path标签的使用

    H5 svg内text image path标签的使用 text标签 div style width 500px height 500px border 2px solid pink margin 50px auto 0 div
  • Uncaught SyntaxError: Unexpected end of input

    Uncaught SyntaxError Unexpected end of input 最近做项目遇到这样一个问题Uncaught SyntaxError Unexpected end of input Unexpected end of
  • JSP通用分页

    通用分页核心思路 将上一次查询请求再发一次 只不过页码变了 实现步骤 1 先查询全部数据 baseDao
  • 在react中如何结合antd实现分页功能

    在react中如何结合antd实现分页功能 步骤如下 1安装antd npm i antd s 2在 src App css中引入 antd dist antd css import antd dist antd css 3在需要用分页器的
  • 移动端页面禁止放大缩小

    安卓 在index html文件中添加meta标签 IOS 在 src app vue 中 script 标签内添加代码
  • 看天气WeatherCan V1.0 ---气象数据分析系统web版

    版权声明 本文为CSDN博主 老郭1 的原创文章 遵循CC 4 0 BY SA版权协议 转载请附上原文出处链接及本声明 原文链接 https blog csdn net HZGJF article details 104772394 Wea
  • 【H5】 svg动画 旋转属性与虚线属性

    svg 动画 旋转 transform rotate angle x y 不要写在style里面 angle 旋转角度 x y旋转中心 绘制虚线 stroke dasharray a b a b c d 旋转属性 transform rot
  • 第八站:JavaScript的数据类型、运算符、流程控制语句

    第八站 JavaScript的数据类型 运算符 流程控制语句 欢迎来到第八站 JavaScript的数据类型 运算符 流程控制语句 在这一站 我们将深入探索JavaScript中的核心概念 为你揭示这个语言的奇妙之处 准备好继续冒险了吗 让
  • Vue组件按需引入时v-if和v-show的区别

    普通加载 在父组件中先import子组件 然后在components模块中注册子组件 在进 入页面时 会随着加载当前页面的js文件就加载子组件的内容 子组件的内容和父组件的内容在同一个js文件 按需加载 子组件显示的时候 才会去加载子组件的
  • HTML表格

    目录 实例 表格 表格和边框属性 表格的表头 表格中的空单元格 更多实例 表格标签 一个完整的实例 本例涉及到的资源 eg background jpg eg cute gif 可以使用 HTML 创建表格 实例 表格 这个例子演示如何在
  • vue+element-ui el-tabs切换面板el-tab-pane切换

    在vue项目中 el tabs在页面的右侧显示 切换面板 下面的内容是正常显示的 效果如下 代码如下 父组件
  • JS有小数保留两位,整数不显示小数

    在很多时候要展示数据 会有各种小数处理 碰到页面的数据要根据不同的情况展示不同格式的数据 比如得到的数据是一个小数 现在要将小数保留两位 而整数则不显示小数点 显示整数格式 使用toFixed n 方法 toFixed 2 里面的2表示保留
  • css中float用法

    float浮动 指将指定元素悬浮于所在整体之上 即将垂直排列的元素转换为水平同行显示 平时写出的HTML是具有先后顺序的 对于这个顺序我们称之为标准流 而浮动则是脱离标准流的另一个独立标准 下面给出float定义 float left 左浮
  • 表格嵌套与合并

  • 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载 HTML5期末大作业 (1)

    HTML5期末大作业 动漫电影主题 电影动漫言叶之庭 4页 带音乐 HTML CSS JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 大学生毕设网页设计源码HTML 1 临近期末 你还在为H
  • BugkuCTF-WEB题文件上传

    启动场景 发现是文件上传 只能上传图像 不能上传PHP文件 那应该是寻找漏洞上传PHP文件 PHP文件里写入一句话木马 使用burp抓包 不断尝试发现发现需要修改的地方有三个 一个是http head里的Content Type multi
  • 【H5】 svg画扇形饼图

    H5 svg画扇形饼图 效果图如下 封装代码如下 代码内有详细注解哦
  • 测试基础知识

    常见测试分类 按测试阶段划分 单元测试 针对程序源码进行测试 国内是开发自测 集成测试 又称接口测试 针对模块间的访问地址进行测试 系统测试 对整个系统进行测试 包括功能 兼容性 文档等 验收测试 分为内测和公测 按代码可见度划分 黑盒测试
  • 第8章 多媒体嵌入

    学习目标 了解视频 音频嵌入技术 能够总结HTML5视频 音频嵌入技术的优点 了解常用的视频文件格式和音频文件格式 能够归纳HTML5支持的视频和音频格式 掌握HTML5中视频的嵌入方法 能够在HTML5页面中添加视频文件 掌握HTML5中
  • 使用企业订货软件的担忧与考虑|网上APP订货系统

    使用企业订货软件的担忧与考虑 网上APP订货系统 网上订货系统担心出现的问题 1 如果在订货系统中定错 多 货物了该怎么办 其实这也是很多人在网购或者是现实中经常会犯的一个错误 但是网上订货平台为大家提供了很多的解决方案 其中对于订单的修改

随机推荐

  • linux上从github下载代码缓慢解决办法

    因为github服务器在国外 所以国内用户下载代码较慢 解决办法如下 修改hosts文件 crtl alt t打开终端 在终端中输入 gedit etc hosts 其中gedit是一个带图形界面的文本编辑器 操作如下 在hosts文件添加
  • 适合宝妈做的副业有哪些?

    选择成为一位全职妈妈 需要巨大的勇气和决心 一方面是带宝宝非常的辛苦 还要操持家务 另一方面是放弃赖以生存的工作 把自身的抗风险能力降到很低的水平线 我个人的观点是作为一个全职妈妈是很危险的 所以我比较赞成 作为全职妈妈的同时 尽可能用闲暇
  • html中浮动和定位(练习+知识点)

    目录 定位 1 什么是脱离文档流 2 position定位 2 1 static定位 2 2 relative定位 2 3 absolute定位 2 4 fixed定位 2 5 sticky定位 存在兼容性问题 层级属性z index 浮动
  • java ssh1_[置顶] java SSH1/SSH2远程连接实例

    看到网上有很多通过telnet实现远程登录的例子 就是找不到关于ssh远程登录的例子 ssh2的可能会有一些 但是目前开发项目遇到了比较底层的东西 这个需要通过ssh1连接的 于是就有了这个实例 今天要给大家带来的就是 java通过ssh1
  • 【数据结构】邻接矩阵法

    邻接矩阵 不带权 define MaxVertexNum 100 顶点的最大数目 typedef struct char Vex MaxVertexNum 顶点表 存放下标 复杂信息 int Edge MaxVertexNum MaxVer
  • 云计算虚拟化技术未来发展的趋势及应用(来源: 比特网)

    近两年 随着一些国际知名的虚拟化软件厂商在中国市场的大力开拓 虚拟化及云计算的概念越来越热 虚拟化软件市场大幅升温 同时也带动了一批国内的虚拟化软件企业迅速的发展起来 虚拟化技术从早期的企业应用 逐步过渡到公有云应用 应用范围越来越广泛 那
  • 刷题day22:逆波兰表达式求值

    题意描述 给你一个字符串数组 tokens 表示一个根据 逆波兰表示法 表示的算术表达式 请你计算该表达式 返回一个表示表达式值的整数 类似于二叉树 可以将运算符号看做二叉树的中间节点 遇到运算符之后计算前两个数字与该运算符的运算结果 C
  • 电阻的精度和温漂

    转载自 http blog sina com cn s blog 68b345970100jc2h html 电阻的精度和温漂 1 电阻温度系数 TCR 表示电阻当温度改变1度时 电阻值的相对变化 当温度每升高1 时 导体电阻的增加值与原来
  • python 字符串去除 等等转义空格换行字符

    python去除html特殊转义字符 下面这些是一些我在网上找的一些 好像都不管用 网络上面的一些方法好像都不管用 比如 str text replace str text replace u xa0 等等一些 我使用的时候好像都不管用 下
  • 匿名内部类方式实现线程创建的三种方式

    小demo package demo04 author wh date 2021年08月30日15 57 匿名内部类方式实现线程创建的三种方式 public class demo02 public static void main Stri
  • 企业级springboot项目架构模板V4.0,开箱即用

    此次 4 0 更新点 1 添加线程池的使用 2 Springboot版本更新2 7 0 解决部分冲突的依赖 3 所有表结构去除 ID 字段 不在使用ID作为主键 主键直接使用算法生成 4 解决过滤器 引起Druid监控无法访问的问题 5 F
  • 3.4 流式操作

    1 简介 1 概念 Stream是数据渠道 用于操作数据源所生成的元素序列 它可以实现对集合的复杂操作 例如过滤 排序和映射等 集合是一种静态的数据结构 存储在内存中 而Stream是通过CPU来实现计算的 并不会存储数据 Stream不会
  • linux 出错 “INFO: task xxxxxx: 634 blocked for more than 120 seconds.”的3种解决方案

    1 问题描述 最近搭建的一个linux最小系统在运行到241秒时在控制台自动打印如下图信息 并且以后每隔120秒打印一次 仔细阅读打印信息发现关键信息是 hung task timeout secs 第一次遇到这样的问题 首先百度 通过翻看
  • 在 Java 中,读取 resources 下的文件方式(四种)

    1 测试文件具体位置 2 方式一 项目内路径 使用项目内路径读取 该路径只在开发工具中显示 所以只能在开发工具中使用 项目部署之后无法读取 不通用 SpringBootTest public class ResourcesFIleTest
  • 爱快路由器设置上网

    进入以太网络设置里面查看详细信息 也可cmdipconfig 找出网管 打开电脑的浏览器 地址栏输入 10 100 10 1 在登录界面爱快路由器帐号和密码 默认帐号 admin 默认密码 admin 点击登录 忘记密码可长按路由器重置键
  • rust入门材料清单

    rust book rustbook 配套视频教程 cargo 文档 crate io 标准库api 官方资料索引 rust 编程规范
  • js实现Math.sqrt()方法

    之前面试的时候 面试有一道题 要记算10的平方根 并且精确到0 01 我也是想了一会才想到了一种简单粗暴的方法 也算是完成了 squareRoot num gt let s 1 d 0 1 x 0 01 while s s
  • MyEclipse 8.0 中vssplugin的安装

    今天试用了myeclipse8 0 多了很多新特性 挺不错的 由于本司用的是vss库 所以vssplugin是必装项 可是安装的时候发布目录结构有所变动与myeclipse6 0有所区别 具体安装详见如下步骤 1 下载vss plugin
  • Python画爱心——谁能拒绝用代码敲出来会跳动的爱心呢~

    还不快把这份浪漫拿走 节日就快到来了 给Ta一个惊喜吧 今天给大家分享一个浪漫小技巧 利用Python中的 HTML 制作一个立体会动的心动小爱心 成千上百个爱心汇成一个大爱心 从里到外形成一个立体状 给人视觉上的冲击感 浪漫极了 V hw
  • div页面垂直居中方法方法

    基本思路 1 首们需要position absolute 绝对定位 而层的定位点 使用外补丁margin负值的方法 负值的大小为层自身宽度高度除以二 例子 一个层宽度是400 高度是300 使用绝对定位距离上部与左部都设置成50 而marg