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

块级元素水平垂直居中

更多时间：2014-11-27 类别：Web前端浏览量：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值的规律。

标签：css

上一篇：SQL处理字符串的函数

下一篇：Sql Server系统数据库的作用

您可能感兴趣

块级元素水平垂直居中

块级元素水平垂直居中

热门推荐

排行榜