怎么让一个块级元素居中

1.在css中让块级元素居中的方法有很多种，我先记录第一种方法，具体步骤如下：

（1）给父元素添加绝对定位relative，如果不添加定位，那么块级子元素会在body中垂直居中

position: relative;

（2）给子元素添加相对定位absolute，并且让子元素距离父元素左边和顶部50%的距离，令left:50%;top:50%，此时子元素在父元素的位置是偏右下的

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

（3）在子元素中添加css3中的transform属性让子元素分别向上和向左移动半个子元素的宽度transform:translate(-15,-10)

transform: translate(-15px,-10px);

 2.用margin:auto

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>怎么让块级元素居中</title>
<style>
    .box{
        width: 200px;
        height: 200px;
        background-color: #ff0;
        position: relative;
    }
    .cbox{
        width: 50px;
        height: 50px;        
        background-color: #f00;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
</style>
</head>
<body>
    <div class="box">
        <div class="cbox"></div>
    </div>
</body>
</html>

 

posted @ 2018-04-10 11:37  RiceYao  阅读(915)  评论(0)  编辑  收藏  举报