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

时间 2019-12-12

标签固定高度宽度 div 水平垂直居中栏目 CSS 繁體版

原文原文链接

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

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

水平居中

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

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

具体代码以下spa

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

具体代码以下code

//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;），并且还要用到一个辅助的元素htm

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

具体代码以下class

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

固然确定还有其余办法，有知道的欢迎指点hack