(水平)居中的实现方法

1.用inline-block和vertical-align来实现居中

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       *{
         padding: 0px;
         margin: 0px;
       }
       #container{
         text-align: center;
         height: 400px;
         background: #BE4F4F;
       }
       #container:before{
          content: "";
          height: 100%;
          display: inline-block;
          vertical-align: middle;
       }
       #center-div{
          display: inline-block;
          vertical-align: middle;
          background: #5A6A94;
       }          
    </style>
</head>
<body>
    <div id="container">
        <div id="center-div">
            姜港生博客
        </div>
    </div>
</body>
</html>

2.用margin实现居中

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>demo</title>
        <style type="text/css">
            *{
                padding: 0px;
                margin: 0px;
            }
            .center-div{
                margin:0 160px;
                height:500px;
                background:#BE4F4F;
            }
            .left{
                width:150px;
                float:left;
                height:500px;
                background:#5A6A94;
            }
            .right{
                width:150px;
                float:right;
                height:500px;
                background:#5A6A94;
            }
        </style>
    </head> 
    <body>
        <div id="container">
            <div class="left"></div>
            <div class="right"></div>
            <div class="center-div"></div>
        </div>
    </body>
</html>
发表新评论