不固定高度和宽度的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;

      <span class="kw">}</span>

      

      </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;

      <span class="kw">}</span>

      

      </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;

      <span class="kw">}</span>
<span class="fl">.mid-hack</span> <span class="kw">{</span>
    <span class="kw">display:</span> <span class="dt">inline-block</span><span class="kw">;</span>
    <span class="kw">font-size:</span> <span class="dt">0</span><span class="kw">;</span>
    <span class="kw">height:</span> <span class="dt">100%</span><span class="kw">;</span>
    <span class="kw">vertical-align:</span> <span class="dt">middle</span><span class="kw">;</span>
    <span class="kw">width:</span> <span class="dt">0</span><span class="kw">;</span>
<span class="kw">}</span>

      

      </style>

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

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

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