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

最新推荐文章于 2020-11-19 16:07:35 发布

weixin_30765319

最新推荐文章于 2020-11-19 16:07:35 发布

阅读量112

点赞数

原文链接：http://www.cnblogs.com/keloo/p/4838442.html

版权

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

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

转载于:https://www.cnblogs.com/keloo/p/4838442.html

weixin_30765319

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫