实现div左右上下都居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试</title>
<style>
.div1{ position:absolute;
top:50%;
left:50%;
margin:-150px 0 0 -150px;
width:300px;
height:300px;
background:#ccc;}
</style>
</head> <body>
<div class="div1"></div>
</body>
</html>
其实解决的思路是这样的：首们需要position:absolute;绝对定位。而层的定位点，使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。 如：一个层宽度是400，高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为－150。margin-left的值为－200。这样我们就实现了层垂直居中于浏览器的样式编写 注：上面的是一般用于垂直居中与浏览器，想解决div垂直居中与外层div的话，只需要给外层div加上position:relative;就好了；记住，外层div要设定高度和宽度
实现div左右上下都居中的更多相关文章
- 如何让div上下左右都居中
在做登陆页面的话,需要login的div 上下左右都居中. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ...
- 使图片相对于上层DIV始终水平、垂直都居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 如何让图片相对于上层DIV始终保持水平、垂直都居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 如何将一个div盒子水平垂直都居中？
html代码如下: 固定样式: 方法一:利用定位(常用方法,推荐) .parent{ position:relative; } .child{ position:absolute; top:50%; ...
- 多个div并排显示的居中问题——来自腾讯的一道面试题
前两天曲面了一下腾讯,被鄙视了... 自己太水了,且面试官对我可能也有点不爽,说什么还没叫我我就去了,可是尼玛写的面试时间是3点40,我特码进去的时候都3点50了,我还以为晚了呢,他妈的. 实现几个d ...
- HTML+CSS，让div在屏幕中居中（水平居中+垂直居中）方法总结
最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单. 水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法 下面说两 ...
- css3-7 如何让页面元素水平垂直都居中（元素定位要用css定位属性）
css3-7 如何让页面元素水平垂直都居中(元素定位要用css定位属性) 一.总结 一句话总结:元素定位要用css定位属性,而且一般脱离文档流更加好操作.先设置为绝对定位,上左都50%,然后margi ...
- div中的内容居中
要使div中的内容居中显示,不仅div要设定“text-align:centr" ,内置对象要添加margin:auto;属性才能使其在firefox等其他浏览器中也能居中.
- div居中和table居中，jQuery获取下拉列表值
一.div居中 margin-left: auto;margin-right: auto; <div style="width:960px ; margin-left: auto;m ...
随机推荐
- spring-kafka
spring-kafka 使用spring-kafka的小伙伴,看过来. 说明 因为spring-kafka封装的比较厉害,可能跟你实际使用起来有很大的差别. 一个简单的消费例子 在spring-bo ...
- Android GIS开发系列计划
本系列博客的整理与写作计划如下,计划3个月(至2018.2)完成. 第一部分, 入门季 第二部分, Android基础季 第三部分, Data Flow 季 第四部分, 可视化季 第五部分, GIS常 ...
- php设计模式——模板模式
最近打算巩固,整理一下设计模式相关的内容.这篇是关于 ——模板模式! 原文:http://www.jb51.net/article/76052.htm ----------------------- ...
- Network problem solving flow chart
来自为知笔记(Wiz)
- centos 7 静态IP，指定DNS
cd /etc/sysconfig/network-scripts/ 找到对应的网卡,配置并编辑 ls -l vim ifcfg-em1 配置例子: TYPE="Ethernet" ...
- jQuery的DOM操作之捕获和设置
.html()--获取或设置目标元素内的全部内容,包括html的标签及属性在内: .text()--仅获取或设置目标元素内的文本内容. .val()--获取输入框的值: .attr()--获取或设置目 ...
- reactjs 视频教程
近期玩了一下react,感觉挺不错的,搜了一下没有看到什么视频教程,于是自己便录制了几个入门视频.希望能够帮到大家.已经上传土豆了,能够点击以下的链接查看. http://www.tudou.com/ ...
- C#高级编程五十四天----Lookup类和有序字典
Lookup类 Dictionary<Tkey,TValue>仅仅为每一个键支持一个值.新类Lookup<Tkey,TValue>是.NET3.5中新增的,它类似与Dictio ...
- VMWare无法共享文件夹(Win7宿主机\Ubuntu14.04客户机)
在安装VMWare tools的时候,需要执行 vmware-install.pl.在安装过程中,需要编译vmhgfs module,如果编译失败就很可能导致共享文件夹无法正常挂载. 最近,我在虚拟机 ...
- 十分简便的APK反编译(Mac 版本号 具体解释）
之前參考了网上大神们介绍的apk for mac 的反编译的文章,里面写的十分具体而有用,可是因为apk for mac中反编译细节十分繁琐,过程也相对照较复杂,针对这个缺陷本人对其反编译的过程进行 ...