您的位置:首页 > Web前端 > css > 正文

块级元素水平垂直居中

更多 时间:2014-11-27 类别:css 浏览量:2251

块级元素水平垂直居中

块级元素水平垂直居中

html页面

  •  
  • 
      <body>
        <li class="big">
          <li class="small"></li>
         </li>
      </body>
    
    		
  • css代码

  •  复制
  • 
      .big{
        width:500px;
        height:500px;
        border:1px solid red;
        position:relative;
        }
      .small{
        width:200px; /*自己元素宽高可任意设定 */
        height:200px;
        position:absolute;left:0px;top:0px;right:0px;bottom:0px;
        margin:auto;
        background-color:#cc9900;
        }
    
    		
  • 块级元素水平垂直居中说明

    1、在上述代码中,子级元素的宽高是任意设定的。都可以实现此元素在父级元素中水平垂直居中显示。

    2、在父级元素中,我们用了position的relative属性。在子级元素中,我们将它的position属性设定为absolute后,将四个方向的值都设定为0px。并且让他的margin值自适应。

    3、从审查元素中我们可以发现,如此设定后,子级元素的margin区域会充满整个父级元素,并且左右margin值是相等的,上下margin值亦如此。但是这并不符合,当代码数值有冲突时,优先解析top值及left值的规律。

    本文地址:http://www.studyofnet.com/news/690.html

    标签:css