不固定高度和宽度的div，水平和垂直居中

不固定高度和宽度的div，水平和垂直居中

在写页面时，经常会遇到一个不固定高度和宽度的div，但又要水平或者垂直居中，有点XX

水平居中

对于水平居中，我知道的有2个办法，根据具体情况来选择

  • 第一个是父元素的宽高固定，子元素设置成块（display:block;）,然后利用外边距（margin:0 atuo;）来水平居中

    • 具体代码如下

      //css
<style>
    .container{
        height: 300px;
        border: 1px solid #cccccc;
    }
    .mid{
        margin: 0 auto;
        background-color: #cccccc;
        height: 50px;
        width: 50px;

      }
      
</style>

      //html
<body>
    <div class="container">
        <div class="mid">
        </div>
    </div>
</body>
  • 第二个是父元素的宽高固定，父元素添加css(text-align: center;)，子元素设置成行内元素（display:inline-block;）

    • 具体代码如下

      //css
<style>
    .container{
        height: 300px;
        border: 1px solid #cccccc;
        text-align: center;
    }
    .mid{
        background-color: #cccccc;
        height: 50px;
        width: 50px;
        display: inline-block;

      }
      
</style>

      //html
<body>
    <div class="container">
        <div class="mid">
        </div>
    </div>
</body>

垂直居中

对于垂直居中，要用到（vertical-align:middle;），而且还要用到一个辅助的元素

  • 父元素不变，子元素1设置成行内元素并添加（vertical-align:middle;），另外在加一个同级子元素2，用来撑开子元素1

    • 具体代码如下

      //css
<style>
    .container{
        height: 300px;
        border: 1px solid #cccccc;
    }
    .mid{
        background-color: #cccccc;
        height: 50px;
        width: 50px;
        vertical-align:middle;
        display:inline-block;

      }
      
.mid-hack {
      
display: inline-block;
      
font-size: 0;
      
height: 100%;
      
vertical-align: middle;
      
width: 0;
      
}
      
</style>

      //html
<body>
    <div class="container">
        <div class="mid">
        </div>
        <div class="mid-hack">
        </div>
    </div>
</body>

当然肯定还有其他办法，有知道的欢迎指点

posted @ 2015-09-25 15:42  荒鱼  阅读(449)  评论(0)    收藏  举报