精华内容
下载资源
问答
  • div绝对居中

    2011-03-18 11:18:00
    %@ Page Language="C#" AutoEventWireup="true" CodeFile="div绝对剧中.aspx.cs" Inherits="div绝对剧中" %> <!DOCTYPE ...

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="div绝对剧中.aspx.cs" Inherits="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 runat="server">
        <title>div绝对居中</title>
        <style type="text/css">
     /*居中层CSS,定位页面中央的一点*/
     #center
     {
      background:#ffffff;
      height:400px;
      width:300px;
      /*设置位置*/
      top:50%;
      left:50%;
      position:absolute;
      
      color:#ffcccc;
     }
     /*内容层CSS,根据中央的一点确定自己的位置*/
     #content
     {
      background:red;
      width:300px;
      height:200px;
      /*设置浮动,脱离居中层限制(菜单什么很有用哦)*/
      position:absolute;
      /*上右下左的边距,这里设置的2个值,第一个是高,第二个是宽,但都是这个DIV的宽高的一半*/
      margin:-100px 0 0 -150px;
      /*演示用*/
      color:#111111;
     }
            /*以上两个从http://www.cccbbs.net/htm_data/36/0811/28798.html看到的,进行了一定的修正*/
            /*以上两个的合并,只要调用这一个CLASS就OK了*/
     #test_center
     {
      width: 340px;
      height: 140px;
      left: 50%; top:
      50%;
      margin-left:-170px;
      margin-top: -70px; position: absolute;
      background:#BBBBBB;
     }
    </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div id="center">
                <div id="content">
                    sssssssssssss
                </div>
            </div>
        </form>
    </body>
    </html>

    转载于:https://www.cnblogs.com/xiachufeng/archive/2011/03/18/1987864.html

    展开全文
  • DIV绝对居中

    2009-11-12 11:44:00
    /*上右下左的边距,这里设置的2个值,第一个是高,第二个是宽,但都是这个DIV的宽高的一半*/ margin:-100px 0 0 -150px; /*演示用*/ color:#111111; } /*以上两个从...

    下面是源代码:

    <html>
    
    <head>
    
    <style type="text/css">
    
    	/*居中层CSS,定位页面中央的一点*/
    
    	#center
    
    	{
    
    		background:#111111;
    
    		height:400px;
    
    		width:300px;
    
    		/*设置位置*/
    
    		top:50%;
    
    		left:50%;
    
    		position:absolute;
    
    		
    
    		color:#ffcccc;
    
    	}
    
    	/*内容层CSS,根据中央的一点确定自己的位置*/
    
    	#content
    
    	{
    
    		background:#D0DEED;
    
    		width:300px;
    
    		height:200px;
    
    		/*设置浮动,脱离居中层限制(菜单什么很有用哦)*/
    
    		position:absolute;
    
    		/*上右下左的边距,这里设置的2个值,第一个是高,第二个是宽,但都是这个DIV的宽高的一半*/
    
    		margin:-100px 0 0 -150px;
    
    		/*演示用*/
    
    		color:#111111;
    
    	}
    
            /*以上两个从http://www.cccbbs.net/htm_data/36/0811/28798.html看到的,进行了一定的修正*/
    
            /*以上两个的合并,只要调用这一个CLASS就OK了*/
    
    	#test_center
    
    	{
    
    		width: 340px;
    
    		height: 140px;
    
    		left: 50%; top:
    
    		50%; 
    
    		margin-left:-170px;
    
    		margin-top: -70px; position: absolute;
    
    		background:#BBBBBB;
    
    	}
    
    </style>
    
    </head>
    
    <body>
    
    	<div id="center">
    
    	<div id="content"></div>
    
    </div>
    
    <div id="test_center"></div>
    
    </body>
    
    </html>

    转载于:https://www.cnblogs.com/jybuding/archive/2009/11/12/1601646.html

    展开全文
  • DIV绝对居中且固定宽高在某些情况下还是比较实用的,具体的实现思路及样式如下,喜欢的朋友可以参考下,希望对大家有所帮助
  • DIV绝对居中例子

    2007-08-08 16:06:53
    一个DIV绝对居中的例子,希望能帮你解决一些垂直居中的问题(包括不定高度的DIV)。。。
  • css让一个div绝对居中

    2020-03-14 15:31:56
    css面试题@让一个div绝对居中 <!-- html页面 --> <body> <div> </div> </body> 方法1 /* css */ html,body{ height: 100%; } body{ margin: ...

    css让一个div绝对居中

       <!-- html页面 -->
    <body>
      <div>
      </div>
    </body>
    

    方法1

      /* css */
       html,body{
                height: 100%;
            }
            body{
                margin: 0;
                background-color: bisque;
                position: relative;
            }
            div{
                background-color: aqua;
                width: 80px;
                height: 200px;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -40px;
                margin-top: -100px;
            }
    

    该方法利用css中父相子绝,让div根据body来进行定位(不加 position: relative;相对定位的话,默认也会相对body来进行定位). left: 50%; top: 50%;会使该div左上角在页面中间.加上 margin-left: -40px; margin-top: -100px;就形成了绝对居中. 该方法适用于宽高都确定的情况下

    方法2

      /* css */
            html,
            body {
                height: 100%;
            }
    
            body {
                margin: 0;
                background-color: bisque;
                position: relative;
            }
    
            div {
                background-color: aqua;
                width: 80px;
                height: 200px;
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
                margin: auto;
            }
    

    该方法是将元素完全脱离文档流使用margin: auto;将div上下,左右都完全居中;

    方法3

      /* css */
            html,
            body {
                height: 100%;
                
            }
    
            body {
                margin: 0;
                background-color: bisque;
                display: flex;
                justify-content: center;
                align-items: center;
            }
    
            div {
                background-color: aqua;
                width: 80px;
                height: 200px;
            }
    

    该方法利用的css3的弹性盒子使横轴以及纵轴都达到了居中的效果 IE10及其以下版本都不兼容

    方法4

       /* css */
            html,
            body {
                height: 100%;
            }
    
            body {
                margin: 0;
                background-color: bisque;
                position: relative;
            }
    
            div {
                background-color: aqua;
                width: 80px;
                height: 200px;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }
    

    该方法利用的css3中 transform属性中translate(-50%, -50%)进行的一个2D的转换,达到了居中的效果
    IE10及其以下版本都不兼容

    方法5

     /* css */
     body {
               margin: 0;
               background-color: bisque;
               width: 2000px;
               height: 1000px;
               display: table-cell;
               text-align: center;
               vertical-align: middle;
            }
    
            div {
                background-color: aqua;
                width: 80px;
                height: 200px;
                display: inline-block;
            }
            
    

    该方法利用文本居中,(不常用).而且必须要有绝对的宽和高百分比的宽高也不可以

    方法6

         //  基本样式的设定
        // box代表div
         box.style.width = '80px'
         box.style.height = '200px'
         box.style.background = ' aqua'
         document.body.style.position = 'relative'
         document.body.style.background = 'bisque'
    
         let htm = document.documentElement
         let htmWidth = htm.clientWidth
         let htmHeight = htm.clientHeight
    
         let boxW = box.clientWidth
         let boxH = box.clientHeight
    
         box.style.position = 'absolute'
         box.style.left = (htmWidth-boxW)/2 +'px'
         box.style.top =( htmHeight-boxH)/2 +'px'
    

    该方法也是用的绝对定位,利用js算出left,和top的精确值,绝对定位到页面的中间

    以上所有方法都可以得到以下效果

    展开全文
  • css+div绝对居中

    2016-03-12 09:37:57
    div+css控制居中显示
    <!DOCTYPE html>  
    <html>  
    <head>  
        <title>居中</title>  
        <meta charset="utf-8"/>  
        <!-- css 代码 -->  
        <style type="text/css">  
            .container {  
                background: rgba(0,0,0,.3);  
                width: 400px;  
                height: 260px;  
                position: absolute;  
                left: 50%;  
                top: 50%;  
                margin-left: -200px;  
                margin-top: -130px;  
                color: #fff;
    			text-align:center;  
            }  
        </style>  
    </head>  
    <body>
    	<div class="container">.container区块 始终显示在页面的中心</div>  
    </body>  
    </html>  

    
    
    展开全文
  • 1、div绝对居中。 效果如下: 就是固定大小的div在浏览器中垂直、水平都居中,适合用到浮动弹出框、页面居中的登陆框等你想得到的地方。以前我也曾使用window.onload和window.onresize来控制高度自适应,宽
  • 在平时,我们经常会碰到让一个div框针对某个模块上下左右都居中(水平垂直居中),其实针对这种情况,我们有多种方法实现。 方法一:绝对定位方法:不确定当前div的宽度和高度,采用 transform: translate(-50%,-50%)...
  • 绝对居中:即在客户端上任何分辨率下纵横方向均居中 紫色的正方形为绝对定位的div position:absolute;top: 50%;left: 50%;只能把div定位在以红色圈为起点的位置,加上margin:-100px 0px 0px -100后,便可以让其...
  • DIV绝对居中(CSS)

    2019-08-14 13:54:40
    < style type = " text/css " > <!--   #hc{ height:200px;  width:400px;...div id = " hc " > div >   转载于:https://www.cnblogs.com/leotian/archive/2008/12/13/1354245.html
  • 薄者 的 JavaScript 缩放窗口后,DIV绝对居中body{background-color:#cccccc;width:100%;}#mtid{position: absolute;top:50%;left:50%} #mtid[id]{display:table-cell;left:0;vertical-align:middle;position:static...
  • 一般来说,指定高度的DIV垂直和水平居中比较方便,而不定高度的话就稍微麻烦了点,我尝试了一下,通过2个辅助的DIV实现了绝对居中,兼容IE和FF等标准浏览器。 CSS代码: #wrapper{height:100%;width:100%;...
  • 还不如自己就弄个绝对定位的DIV。可现在用户分辨率,五花八门。1024*768 1360*768 等等。去CSDN也看了。什么javascript都来了。还好最后还是被我找到了最简单的方法。下面贴上代码。#myDIV{ left: 50%; top: 50...
  • 在实际开发过程中我们经常会遇到div水平、垂直方向绝对居中的布局需求,在开发过程中div布局通过计算宽和高来用margin、padding定位的方式来达到要求,太过繁琐,有时候还因为布局需求,不能给出定高和宽,而达不到...
  • div id ="test" > < p class ="move" > 按我可以移动窗口 p > 这是内容 div > < body > body > html > 转载于:https://www.cnblogs.com/simq/archive/2012/12/03/2800230.html
  • 一般来说,指定高度的DIV垂直和水平居中比较方便,而不定高度的话就稍微麻烦了点,我尝试了一下,通过2个辅助的DIV实现了绝对居中,兼容IE和FF等标准浏览器。 CSS代码: #wrapper{height:100%;width:100%;...
  • 固定宽高的DIV绝对居中示例

    千次阅读 2013-08-28 15:59:49
    看了一些代码,然后自己试验了一番,分享如下示例: 实现点: 如果元素的宽高固定,那么,css指定样式为top:50%;...如果要在某个父级元素内居中,那么父元素也需要指定CSS的position属性。 如果有边框
  • <!... <title> Matching Game ... <div class="left"></div> <div class="right"> <div class="centerit"> <div class="inner"> i am in the center </div> </div> </div> </div>  
  • div绝对居中显示的css&js

    千次阅读 2012-08-26 13:43:07
    使DIV居中css代码,其中899px,507px分别改成自己的div的宽度和高度 .divname { width: 899px; height: 507px; position: absolute; left: expression(( body.clientWidth-899)/ 2 ); top: expression(( body....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,175
精华内容 470
关键字:

div绝对居中