让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容器内 ...
随机推荐
- CAD使用SetXData写数据(网页版)
主要用到函数说明: MxDrawEntity::SetXData 设置实体的扩展数据,详细说明如下: 参数 说明 [in] IMxDrawResbuf* pXData 扩展数据链表 js代码实现如下: ...
- CAD设置水印
主要用到函数说明: _DMxDrawX::Watermark 设置控件水印图片显示,字符串用逗号隔开,分为: “文件名,透明度,x方向距离,y方向距离,是否居中”, 是否居中0代表在上角定位,1表示自 ...
- vue组件---插槽
(1)插槽内容 Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 Web Components 规范草案,将 <slot> 元素作为承载分发内容的出口. 在父级组件里可以 ...
- python安装外部模块Django
Windows安装Django模块: 由于本人安装的Python版本是Python3.7,所以安装命令为:pip3 install django /pip3 install django安装过程中出现 ...
- layer iframe层弹出图片
这个js是在一个layer iframe弹出层中,点击按钮弹出图片
- TestNG分组测试
分为方法的分组和类的分组: GroupsOnMethod类: package com.janson.groups; import org.testng.annotations.Test; public ...
- ubuntu wsl 子系统使用win10 系统ss代理步骤
wind10 安装ss客户端 配置server 具体不多说 安装 ubuntu 子系统 3.安装python pip apt install python-pip 4.升级pip pip instal ...
- textbook references
* math 1. Teubner-Taschenbuch der Mathematik * CFD
- Codeforces Round #395 C. Timofey and a tree
package codeforces; import java.util.*; public class CodeForces_764C_Timofey_and_a_tree { static fin ...
- Discuz 部署,500 – 内部服务器错误。 您查找的资源存在问题,因而无法显示。
Windows7 IIS 500 – 内部服务器错误解决方案 1.解决方法:打开IIS,在功能视图中找到“错误页”,双击进去后,看最右边的“操作”下的“编辑功能设置…”,将“错误响应”下的“详细错误” ...