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

    千次阅读 2019-09-30 16:49:21
    1、兼容性不错的主流css绝对定位居中的用法: .conter{ width: 600px; height: 400px; position: absolute; left: 50%; top: 50%; margin-top: -200px; /* 高度的一半 */ margin-left: -300px; /* 宽度的一半 */...

    1、兼容性不错的主流css绝对定位居中的用法:

    .conter{
        width: 600px; height: 400px;
        position: absolute; left: 50%; top: 50%;
        margin-top: -200px;    /* 高度的一半 */
        margin-left: -300px;    /* 宽度的一半 */
    } 
    

    这种方法有一个很明显的不足,就是需要提前知道元素的尺寸。否则margin负值的调整无法精确。此时,往往要借助JS获得。

    2、使用transform代替margin:

    .conter{
        width: 600px; height: 400px;
        position: absolute; left: 50%; top: 50%;
        transform: translate(-50%, -50%); 
    }
    

    transform中translate偏移的百分比值是相对于自身大小的,可以这样实现css绝对定位居中。

    3、margin:auto实现绝对定位元素的居中

    .conter{
        width: 600px; height: 400px;
        position: absolute; left: 0; top: 0; right: 0; bottom: 0;
        margin: auto;
    }
    

    4,div宽度未知1

    <body>
      <div style="position: absolute; left: 50%;">
        <div style="position: relative; left: -50%; border: dotted red 1px;">
          没有宽度<br />
          照样居中,嘿嘿嘿
        </div>
      </div>
    </body>
    

    2,div宽度未知2

    <div class="outer">
        <div class="inner">居中<br/>蓄力中</div>
    </div>
    
    .outer {
        position: relative; /* or absolute */  
        /* unnecessary styling properties */
        margin: 5%;
        width: 80%;
        height: 500px;
        border: 1px solid red;
    }
    
    .inner {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);  
        /* unnecessary styling properties */
        max-width: 50%;
        text-align: center;
        border: 1px solid blue;
    }
    

    ps:此方法适合ie8以上的浏览器

    展开全文
  • 在网页进行css布局时居中是经常需要用到的,其中就有css绝对定位居中,那么,css绝对定位如何实现居中?今天的这篇文章将给大家来介绍关于css绝对定位居中的实现方法。css绝对定位居中的实现方法有很多,下面将给...

    在网页进行css布局时居中是经常需要用到的,其中就有css绝对定位居中,那么,css绝对定位如何实现居中?今天的这篇文章将给大家来介绍关于css绝对定位居中的实现方法。

    css绝对定位居中的实现方法有很多,下面将给大家介绍css绝对定位居中的四种方法。

    1、兼容性不错的主流css绝对定位居中的用法:.conter{

    width: 600px; height: 400px;

    position: absolute; left: 50%; top: 50%;

    margin-top: -200px; /* 高度的一半 */

    margin-left: -300px; /* 宽度的一半 */

    }

    注意:这种方法有一个很明显的不足,就是需要提前知道元素的尺寸。否则margin负值的调整无法精确。此时,往往要借助JS获得。

    2、css3的出现,使得有了更好的解决方法,就是使用transform代替margin. transform中translate偏移的百分比值是相对于自身大小的,可以这样实现css绝对定位居中:.conter{

    width: 600px; height: 400px;

    position: absolute; left: 50%; top: 50%;

    transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */

    }

    3、margin:auto实现绝对定位元素的居中(上下左右均0位置定位;margin: auto).conter{

    width: 600px; height: 400px;

    position: absolute; left: 0; top: 0; right: 0; bottom: 0;

    margin: auto; /* 有了这个就自动居中了 */

    }

    4、使用css3盒模型:flex布局实现css绝对定位居中。这种情况是在不考虑低版本浏览器的情况下可以使用。

    本篇文章到这里就结束了,关于定位的更多内容可以参考css手册。

    展开全文
  • 在网页进行css布局时居中是经常需要用到的,其中就有css绝对定位居中,那么,css绝对定位如何实现居中?今天的这篇文章将给大家来介绍关于css绝对定位居中的实现方法。 打造全网web前端全栈资料库(总目录)看完学...

    在网页进行css布局时居中是经常需要用到的,其中就有css绝对定位居中,那么,css绝对定位如何实现居中?今天的这篇文章将给大家来介绍关于css绝对定位居中的实现方法。

    打造全网web前端全栈资料库(总目录)看完学的更快,掌握的更加牢固,你值得拥有(持续更新)

    css绝对定位居中的实现方法有很多,下面将给大家介绍css绝对定位居中的四种方法。

    1、兼容性不错的主流css绝对定位居中的用法:

    .conter{
     width: 600px; height: 400px;
     position: absolute; left: 50%; top: 50%;
     margin-top: -200px;    /* 高度的一半 */
     margin-left: -300px;    /* 宽度的一半 */
    }

    注意:这种方法有一个很明显的不足,就是需要提前知道元素的尺寸。否则margin负值的调整无法精确。此时,往往要借助JS获得。

    2、css3的出现,使得有了更好的解决方法,就是使用transform代替margin. transform中translate偏移的百分比值是相对于自身大小的,可以这样实现css绝对定位居中:

    .conter{
     width: 600px; height: 400px;
     position: absolute; left: 50%; top: 50%;
     transform: translate(-50%, -50%);    /* 50%为自身尺寸的一半 */
    }

    3、margin:auto实现绝对定位元素的居中(上下左右均0位置定位;margin: auto)

    .conter{
     width: 600px; height: 400px;
     position: absolute; left: 0; top: 0; right: 0; bottom: 0;
     margin: auto;    /* 有了这个就自动居中了 */
    }

    4、使用css3盒模型:flex布局实现css绝对定位居中。这种情况是在不考虑低版本浏览器的情况下可以使用。

     

    展开全文
  • 在网页进行css布局时居中是经常需要用到的,其中就有css绝对定位居中,那么,css绝对定位如何实现居中?今天的这篇文章将给大家来介绍关于css绝对定位居中的实现方法。 css绝对定位居中的实现方法有很多,下面将给...

    在网页进行css布局时居中是经常需要用到的,其中就有css绝对定位居中,那么,css绝对定位如何实现居中?今天的这篇文章将给大家来介绍关于css绝对定位居中的实现方法。

    css绝对定位居中的实现方法有很多,下面将给大家介绍css绝对定位居中的四种方法。

    1、兼容性不错的主流css绝对定位居中的用法:

    > .conter{
    > 
    > width: 600px; height: 400px;
    > 
    > position: absolute; left: 50%; top: 50%;
    > 
    > margin-top: -200px;    /* 高度的一半 */
    > 
    > margin-left: -300px;    /* 宽度的一半 */
    > 
    > }
    
    

    注意:这种方法有一个很明显的不足,就是需要提前知道元素的尺寸。否则margin负值的调整无法精确。此时,往往要借助JS获得。

    2、css3的出现,使得有了更好的解决方法,就是使用transform代替margin. transform中translate偏移的百分比值是相对于自身大小的,可以这样实现css绝对定位居中:

    > .conter{
    > 
    > width: 600px; height: 400px;
    > 
    > position: absolute; left: 50%; top: 50%;
    > 
    > transform: translate(-50%, -50%);    /* 50%为自身尺寸的一半 */
    > 
    > }
    
    

    3、margin:auto实现绝对定位元素的居中(上下左右均0位置定位;margin: auto)

    
    > .conter{
    > 
    > width: 600px; height: 400px;
    > 
    > position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    > 
    > margin: auto;    /* 有了这个就自动居中了 */
    > 
    > }
    
    

    4、使用css3盒模型:flex布局实现css绝对定位居中。这种情况是在不考虑低版本浏览器的情况下可以使用。

    这里推荐一下我的前端学习交流圈:767273102 ,里面都是学习前端的从最基础的HTML+CSS+JS炫酷特效,游戏,插件封装,设计模式到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴。2020最新技术,与企业需求同步。好友都在里面学习交流,每天都会有大牛定时讲解前端技术!

    学习前端,我们是认真的

    展开全文
  • 主要介绍了JS弹出层的绝对定位居中是如何实现的,需要的朋友可以参考下
  • CSS实现垂直居中水平居中的绝对定位居中技术 Ⅰ.绝对定位居中(Absolute Centering)技术 我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中……实际上,实现垂直居中仅...
  • div绝对定位 居中

    2013-09-11 14:26:40
    div绝对定位居中这样的效果在web设计中经常碰到。 一个div绝对定位居中,他的父级是相对整个html文档的: html代码: div绝对定位居中 css代码: #wrap{  width:200px;  height:200px;  position:absolute;  top...
  • 目录(?)[+] ...绝对定位居中(Absolute Centering)技术 我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中……实际上,实现垂直居中仅需要声明元素高度和下面的CSS:
  • 一下代码可以解决绝对定位居中的问题 display: flex; flex-direction: row: /* row 为横向排列,column 为纵向排列 */ align-items: center; justify-content: center;
  • 绝对定位居中(Absolute Centering)技术 我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中……实际上,实现垂直居中仅需要声明元素高度和下面的CSS: .Absolute-Center { margin: ...
  • div绝对定位居中

    2018-07-11 09:25:00
    绝对定位absolute,left:50%,加上margin-left:-(宽度/2),可以实现绝对位置居中 .list{ width: 1200px; height: 300px; overflow: hidden; position: absolute; left: 50%; margin-left: -600px;}上面是早期...
  • 绝对定位居中(Absolute Centering)技术 我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中……实际上,实现垂直居中仅需要声明元素高度和下面的CSS: [css] view plain copy print?....
  • 绝对定位居中(Absolute Centering)技术 我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中……实际上,实现垂直居中仅需要声明元素高度和下面的CSS: [css] view ...
  • 绝对定位居中

    2015-04-18 22:13:46
    margin-left:-50px使用绝对定位对,假设父元素的宽度是100px,那么子元素使用绝对定位定位position:absolute;left:50% 将定位到父元素的右半部分,然后就使用margin-left:-50px将子元素向左移动子元素宽度的一半,...
  • 示例: #content{ position:absolute; width:650px; height:298px; left:50%; top:50%; margin-left:-325px; /*设置为宽度的一半*/ ...left: 要设为 50%,此时当前框体,左上角居中了,当然此时要让框体整...
  • 使用body使用背景图片在绝对定位中剧中 (${ctxStatic}/frame/login/themes/theme-4.png) center 0 no-repeat; verflow:hidden;position:absolute;height:678px; width:1200px;left:0;right:0;top:50p
  • 绝对定位居中(Absolute Centering)技术 我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中……实际上,实现垂直居中仅需要声明元素高度和下面的CSS: [css]view plaincopy ...
  • 使用绝对定位有个限制就是父集必须设置一个固定的高度。 首先HTML 1 <div id="box"> 2 <div class="child"></div> 3 </div> CSS 1...
  • css设置绝对定位居中

    千次阅读 2018-06-06 11:45:18
    lt;body&gt;标签,在&lt;body&gt;标签中创建&... fixed浮动居中&lt;/div&gt;如图:对div设置基本属性。html文件找到&lt;title&gt;标签,在这个标签后新建一个&lt;style&a
  • CSS实现绝对定位居中

    千次阅读 2016-08-16 21:45:09
    我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中……实际上,实现垂直居中仅需要声明元素高度和下面的CSS: .Absolute-Center { margin: auto; position: absolute; top: 0; ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 36,722
精华内容 14,688
关键字:

绝对定位居中