`
cloudtech
  • 浏览: 4610546 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
文章分类
社区版块
存档分类
最新评论

网页:absolute定位的div居中显示

 
阅读更多

DIV水平垂直居中显示:

将left和top设置为50%来定位div到浏览器中央,再将margin-left和margin-top值设置为宽和高的一半,使div居中显示。示例如下:

.ssss{  
position:absolute;  
width:600px;  
height:200px;  
left:50%;  
top:50%;  
margin-left:-300px;  
margin-top:-100px;  
border: solid 5px red;  
}  
html语句为:
<div class="ssss">abcdefghijklmnopqrstuvwxyz</div> 


分享到:
评论

相关推荐

    div完美自适应动态上下左右居中

    复制代码代码如下: div { position:absolute; width:500px; height:260px; top:50%; left:50%; margin-left:-250px; height:-130px; z-index:1000; } 文字居中:text-align:center; height:22px;line-height:22px;...

    JS实现div居中示例

    /*外层div居中*/ #main { position: absolute; /*极为重要*/ background-color: blue; width:400px; height:200px; /*left:50%; top:50%; margin-left:-200px; margin-top:-100px;*/ border:1px solid #00F; } #...

    CSS 将两个button按钮垂直+水平居中

    这个方法使用了一个 position:absolute,有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0; 。但是因为它有固定高度,其实并不能和上下都间距为 0,因此 margin:auto; 会使它居中。使用 **margin:auto;**...

    Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法

    这两天要用到正好练练手,比想象中碰到的问题要多,比如: ie6背景透明 ie6居中显示 还有对js对象的理解 openID=显示按钮,conID=需要显示的div,closeID=关闭按钮 解决了: 1.可以遮挡ie6下的select元素 但是在ie6下div...

    div居中显示的css样式代码

    复制代码代码如下: &lt;style type=”text/css”&gt;...} /* 让内容垂直居中的控制样式在下面这一行 */ #PageMain{width:1002px; height:602px; background-color:#0E4980; margin:0 auto; position:absolute;

    jQuery实现的浮动层div浏览器居中显示效果

    本文实例讲述了jQuery实现的浮动层div浏览器居中显示效果。分享给大家供大家参考,具体如下: 1.在页面的head中引入jQuery [removed][removed] 2.在页面的head中加入浮动层和遮罩层的样式 &lt;style&gt; #...

    使用css实现div垂直居中的示例

    复制代码代码如下:&lt;!... &lt;head&gt; &lt;meta charset=”utf-8″ /&gt;... /*外层div居中*/ #main { position: absolute; /*极为重要*/ background-color: blue; width:400px; height:200px; left:50%; top:50%;

    基于jQuery实现的水平和垂直居中的div窗口

    1、通过css实现水平居中: 代码如下: .className{ margin:0 auto; width:200px; height:200px; } 2、通过css实现水平居中和垂直居中 通过css创建一个水平居中和垂直居中的div是一件比较麻烦的事情,您必须事先知道...

    DIV+CSS 全屏垂直居中的一个办法

    我是先定了一个点在中间,然后再把里边的这一块居中处理; &lt;style&gt; #info{height:0px; width:0px;top:50%; left:50%;position:absolute;} #center{background:#FFCC33;border:1px solid #0033FF; width:300...

    JS实现图片垂直居中显示小结

    &lt;div class=center&gt;居中效果&lt;/div&gt; &lt;/div&gt; /*第1种,垂直居中效果*/ .box{ width: 200px;height: 200px;border: 1px solid #ccc; position: relative; } .center{ width: 100px;height: 100px;background: gray...

    css 非表格垂直对齐效果代码

    position:absolute,绝对定位,可以把这个div看成漂浮于这个页面之上,通过top:50%和left:50%定位这个div的位置,但这个时候,垂直与水平居中的是这个div左上角这一点。所以,要让这个div的中心点位于整个页面的中间...

    css 水平居中,垂直居中,自适应宽度的代码

    一、宽度自适应的元素水平居中:  1.宽度自适应的元素可以是:绝对位定、浮动元素、行内元素。而我们通常布局,肯定不会用行内元素,所以会选择,绝对定位或浮动。 2.居中:这里我们应该会想到1/2、50%、一半等...

    DIV水平垂直居中css实现代码

    主要代码: position:absolute; top:50%; left:50%; margin-top:-(height/2); margin-left:-(width/2) &lt;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...

    设置一个层在浏览器中同时左右居中上下居中水平垂直居中

    想要使定义的一个层即能在浏览器中左右居中,又可以上下居中,可以用绝对定位再结合百分比形式的left、top属性以及负外补丁来实现。代码如下: css代码: 复制代码代码如下: div { position:absolute; top:50%; ...

    CSS完美解决前端图片变形问题的方法

    一、让图片的宽度或者高度等于容器的宽度或高度,多余的裁掉,然后让图片居中: &lt;style type="text/css"&gt; div{ width: 200px; height: 200px; overflow: hidden; border: 2px solid red; position: ...

    一个上下左右都居中的CSS+html写法

    上下左右都居中的CSS+html写法,position:absolute;top:50%;margin-top:-50px;left:50%;margin-left:-50px;

    css中常用的几种居中方法(推荐)

    在前端面试中,大都会问你div居中的方法: 文笔不好,就随便寥寥几句话概括了, 不过以后文笔肯定会变得更好一些的。 今天我们就细数一下几种方法: 1,使用position:absolute,设置left、top、margin-left、margin-...

    jquery.easydrag.handler.beta2.js

    幕的分辨率然后将div居中。 js代码: { var div_width=Number(jQuery(‘#box’).css(‘width’)); var sc_width=(Number(window.screen.width)/2-(div_width/2)); //div距离浏览器左边框的距离为屏幕宽 度的一半-...

    CSS两种水平垂直居中示例介绍

    第一种:将固定大小的div框相对窗口水平垂直居中,改变浏览器窗口大小时,依然保持水平垂直居中; 复制代码代码如下: &lt;!doctype html&gt; &lt;html lang=”en”&gt; &lt;head&gt; &lt;title&gt;水平垂直居中&lt;/...

    固定宽高的DIV如何绝对居中

    当然,position也需要指定为absolute,或者relative. 如果要在某个父级元素内居中,那么父元素也需要指定CSS的position属性。 如果有边框,那么,margin元素需要做一点微调。 代码如下: 复制代码代码如下: &lt;!...

Global site tag (gtag.js) - Google Analytics