CSS实战技巧:块级元素水平垂直居中

1.块级元素水平垂直居中

html代码

<body>
  <div class="big">
      <div class="small">div>
  div>
body>

CSS代码

   .big{
    width:500px;
    height:500px;
    border:1px solid red;
    position:relative;
    }
  .small{
    width:200px;    /*自己元素宽高可任意设定 */
    height:200px;
    position:absolute;    ---1----
            left:0px;             ---2----
            top:0px;              ---3----
            right:0px;            ---4----
            bottom:0px;           ---5----
    margin:auto;          ---6----
    background-color:#cc9900;
    }

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

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

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


你可能感兴趣的:(css)