开发者社区> 青衫无名> 正文

调整窗口大小也能够实现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水平垂直居中代码实例

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
style样式优先级问题【display:block依旧无法显示DOM元素】
style样式优先级问题【display:block依旧无法显示DOM元素】
59 0
前端的那些必须要掌握的样式设置和布局【CSS、浮动、清除、固定、em、rem等等......】
前端的那些必须要掌握的样式设置和布局【CSS、浮动、清除、固定、em、rem等等......】
49 0
内容滚动条和子 div 高度自适应
一个div里面,两个子div高度自适应(平分父div的高度)和元素内容过多的时候,根据需求出现高度滚动条或者宽度滚动条。 先放最终效果(在下面会有demo代码。): Paste_Image.png 实现这些效果要怎么做呢?咱一步一步来。 第一步: 先设置html结构:这里我已经搭好了。 第二步然后开始写css样式了 设置父元素box的样式 设置box1的样式 现在尝试把html解除注释 下面就到了关键的部分了(文章末尾有demo,不想看的话,可以自己试试。): 在上面我们已经设置了最大高度和最小高度,因为box1空间不够所以溢出来了。
338 0
web前端学习(二十三)——CSS3定位(position)、元素裁剪(clip)及鼠标样式(cursor)属性的相关设置
web前端学习(二十三)——CSS3定位(position)、元素裁剪(clip)及鼠标样式(cursor)属性的相关设置
124 0
js 实现上下拖动改变父 div 的高度,左右上下拖动动态分割孩子的宽高
js 实现上下拖动改变父 div 的高度,左右上下拖动动态分割孩子的宽高
305 0
关于html元素Css样式设置的一点心得(特别是与位置有关的,还有外边距、内边距有关的那些)
关于html元素Css样式设置的一点心得(特别是与位置有关的,还有外边距、内边距有关的那些)
52 0
CSS------当内容超出div宽度后自动换行和限制文字不超出div宽度和高度
原文:CSS------当内容超出div宽度后自动换行和限制文字不超出div宽度和高度 如图:   1.自动换行 111111111111111111111111 2.限制宽高度 11111111111111111111111111  (注意:如果div放在li中还需...
2786 0
+关注
青衫无名
文章
问答
视频
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载