让DIV在屏幕上下左右居中
转自:http://blog.sina.com.cn/s/blog_65d41dff0100v0iz.html
其实解决的思路是这样的:首们需要position:absolute;绝对定位。而层的定位点,使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。
代码:
<style type="text/css">
<!--
#content{ width:402px;height:302px;position:absolute;top:50%;left:50%;margin:-151px 0 0 -201px;border:1px solid red;}
-->
</style>
<div id="content"></div>
让DIV在屏幕上下左右居中的更多相关文章
- HTML+CSS,让div在屏幕中居中(水平居中+垂直居中)方法总结
最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单. 水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法 下面说两 ...
- css div相对屏幕永远居中
不管屏幕如何滑动,该div始终保持在屏幕正中央(支持IE7(包括IE7)以上版本) <div class="loginBox"></div> .loginB ...
- css div上下左右居中
相信大家都会遇到这样的问题,要求一个块上下左右居中,在这里我总结了几个好用的方法 1.已知要居中的块width height 假设 content 要在f里上下左右居中 <div class= ...
- css:子元素div 上下左右居中方法总结
最近在面试,不停地收到了知识冲击,尤其是对于一些基础的css.html.js问题居多,所以自我也在做反思,今天就css问题,如何让一个子元素div块元素上下左右居中 (以下总结方法,都已得到验证). ...
- div元素上下左右居中
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 用CSS让DIV上下左右居中的方法
转载自喜欢JS的无名小站 例如 一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;).让其上下左右居中. 方法一(varticle-align) 理念 利用表格 ...
- div层上下左右居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 使用jQuery在屏幕上居中一个DIV
文章目录 我如何去使用jQuery在屏幕的中心设置<div>? 我喜欢给jQuery添加函数,所以这个函数将有助于: jQuery.fn.center = function () { th ...
- 只用CSS实现容器内图片上下左右居中
一直以来,大家都知道,DIV容器内设置 text-align:center 即可让图片居中,但是DIV内默认的图片是上对齐,不会上下居中,如果想要实现这样的效果,JS判断是比较麻烦的,因为DIV容器内 ...
随机推荐
- Spring Boot 创建hello world项目
Spring Boot 创建hello world项目 1.创建项目 最近在学习Spring Boot,这里记录使用IDEA创建Spring Boot的的过程 在1出勾选,选择2,点击Next 这里填 ...
- document.write() 和 document.writeln区别
document.write() 和 document.writeln 都是JavaScript向客户端写入的方法,writeln是以行方式输出的,但并不是指页面实际效果中的换行,两种方法在查看源代码 ...
- C++ string使用
在c语言里,我们使用一个字符串时,是通过字符数组或者字符指针的方式来进行使用,在C++里,标准模板库已经给我们提供了string类型(string是以类的方式提供给我们使用). 定义和初始化strin ...
- Python使用Flask框架,结合Highchart处理csv数据(引申-从文件获取数据--从数据库获取数据)
参考链接:https://www.highcharts.com.cn/docs/process-text-data-file 1.javascript代码 var options = { chart: ...
- 洛谷 1328 生活大爆炸版石头剪刀布(NOIp2014提高组)
[题解] 简单粗暴的模拟题. #include<cstdio> #include<algorithm> #include<cstring> #define LL l ...
- 数位dp备忘录
hdu 4734:把限制值化为数组形式,逐位求解 hdu 4507:类似于上题,其中求平方和的方法很妙 SPOJ BALNUM Balanced Numbers:经典数位dp,注意两点,1,不要把前 ...
- nginx+keepalived+consul 实现高可用集群
继 负载均衡 之 nginx+consul+consul template,我这次将使用2台虚拟机,来做一个简单的双机负载均衡试验. 试验目标: 1. 当参加负载均衡的子节点服务,有任何其中一个或多个 ...
- JavaSE 学习笔记之集合框架(十八)
集合框架:,用于存储数据的容器. 特点: 1:对象封装数据,对象多了也需要存储.集合用于存储对象. 2:对象的个数确定可以使用数组,但是不确定怎么办?可以用集合.因为集合是可变长度的. 集合和数组的区 ...
- apt-get使用指南
最近频繁使用apt-cache show(查看软件包详细信息)与apt-cache search(搜寻具体软件包确切名称)命令,深感方便与功能强大.现将一些apt-get相关命令做一个简单的收集: a ...
- [poj1678]I Love this Game!_博弈论
I Love this Game! 题目大意:题目链接 注释:略. 想法: 开始的时候以为没法dp,结果...:a>0啊! 所以可以直接dp了啊! 状态:dp[i]表示先手选了a[i]的状态. ...