调整窗口大小也能够实现div水平垂直居中代码实例

简介:

将一个div在窗口内实现居中效果,基本上没有什么难度,具体可以参阅CSS实现div屏幕居中效果代码章节。 

但是有时候我们可能会有这样的需求,就是在调整窗口大小的情况下也能够实现div垂直水平居中效果,下面通过代码实例做一下简单介绍,代码如下:

 
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< meta name = "author" content = "http://www.softwhy.com/" />
< title >蚂蚁部落</ title
< style type = "text/css" >
*{
   margin:0px;
   padding:0px;
}
#thediv{
   width:200px;
   height:100px;
   background:green;
   position:absolute;
   left:50%;
   top:50%;
   margin-left:-100px;
   margin-top:-50px;
}
</ style
</ head >
< body >
< div id = "thediv" ></ div >
</ body >
</ html >

上面的代码实现了我们的要求,因为div采用的是绝对定位,并且采用百分比的方式来确定div的基本位置,不是采用固定尺寸的方式,然后在使用外边距向回调整一定的距离,这样就实现了居中效果,同时调整浏览器窗口也会实现一直居中的效果。


原文发布时间为:2017-3-9

本文作者:admin

本文来自云栖社区合作伙伴“蚂蚁部落”,了解相关信息可以关注蚂蚁部落

原文链接:调整窗口大小也能够实现div水平垂直居中代码实例

相关文章
|
数据采集 大数据 数据挖掘
DataHub应用场景有哪些?
本文为您介绍DataHub三大应用场景,主要场景包括:实时数据通道、实时数据清洗和分析、实时数据仓库。
1275 0
|
网络协议 前端开发 JavaScript
浏览器加载网页的幕后之旅:从URL到页面展示详解
【8月更文挑战第31天】当在浏览器地址栏输入URL并回车后,一系列复杂过程随即启动,包括DNS解析、TCP连接建立、HTTP请求发送、服务器请求处理及响应返回,最后是浏览器页面渲染。这一流程涉及网络通信、服务器处理和客户端渲染等多个环节。通过示例代码,本文详细解释了每个步骤,帮助读者深入理解Web应用程序的工作机制,从而在开发过程中作出更优决策。
301 5
|
Web App开发 机器学习/深度学习 人工智能
AI Agent满级进化!骑马种田、办公修图,样样精通,昆仑万维等发布通用Agent新框架
【7月更文挑战第23天】AI Agent技术迎来突破,昆仑万维联合顶尖学府发布Cradle框架,赋能智能体通用控制能力。Cradle结合大型语言模型与六大核心模块,实现跨场景灵活操控,从游戏到办公软件,无师自通。实验验证其在《荒野大镖客2》等游戏及Chrome、Outlook上的卓越表现。框架开源,促进AI社区进步,但仍需面对实际应用的挑战与安全性考量。[论文](https://arxiv.org/abs/2403.03186)详述创新细节。
351 3
|
自然语言处理 安全 API
触发邮件接口有哪些?邮件API文档
**触发邮件接口**如AokSend、Mailgun、Amazon SES、Postmark和Sendinblue是自动化企业通信的关键。这些接口在特定事件时自动发送邮件,提高效率和客户体验。例如,AokSend提供详细的API文档,支持事件触发、模板管理和多语言集成;Mailgun以灵活性著称;Amazon SES适合大规模发送;Postmark专注于事务邮件;Sendinblue则提供邮件、短信和营销自动化功能。每种服务都有示例代码展示如何使用API发送邮件。选择合适的接口能提升企业通信效率和客户满意度。
如何定时打开网站
该内容是一个教程,介绍如何使用一个工具设置定时任务自动打开网页。用户需要从度娘网盘或蓝奏云下载工具,提取码分别为qwu2和2r1z。然后在工具中按Ctrl+3进入定时器模块,新建任务命名为“百度”,设置每1分钟执行一次,打开百度网站。通过右键添加链接并输入百度网址,完成设置后,倒计时任务会在主界面显示,计时结束会自动打开百度。
计算机网络:物理层下的传输媒体概览
计算机网络:物理层下的传输媒体概览
306 0
|
关系型数据库 MySQL
MySQL:添加和查看表注释、字段注释
MySQL:添加和查看表注释、字段注释
527 0
|
缓存 编解码 dexposed
「性能优化系列」APP内存优化理论与实践
当一个应用同时运行越来越多的任务以及复杂的业务,Android系统的内存管理机制已经无法满足内存的释放与回收,为了应用的稳定性与性能,去控制内存的创建和回收就成为了一个重要的命题。
675 0
|
编解码 JavaScript IDE
RISC-V生态开发套件解析(五):LicheeRV 86开发板BSP SDK开发和Xboot 镜像体验
随着RISC-V生态的蓬勃发展,相关开源开发套件也开始逐渐丰富。为了帮助开发者快速了解、玩转新推出的RISC-V开发套件,OCC推出RISC-V生态开发套件解析系列内容,详细讲解生态开发套件的功能特点与上手教程。
694 0
RISC-V生态开发套件解析(五):LicheeRV 86开发板BSP SDK开发和Xboot 镜像体验
|
数据采集 运维 达摩院
入选 SIGMOD2021 的时间序列多周期检测通用框架 RobustPeriod 如何支撑阿里业务场景?
本文除了介绍RobustPeriod的核心技术亮点,还将重点解释如何将它构筑成服务来解决阿里云的业务痛点。
入选 SIGMOD2021 的时间序列多周期检测通用框架 RobustPeriod 如何支撑阿里业务场景?