CSS之居中

weixin_34148340發表於2019-01-16
CSS

一、水平居中

1.text-align

值：left，right，center，justify（文字兩端對齊）

<style type="text/css">
    .container{
        width: 400px;
        height: 200px;
        text-align: center;
    }
    img{
        max-width: 120px;
        max-height: 120px;
    }
</style>
<div class="container">
    <span>span</span>
    <div>div</div>
    <img src="https://www.baidu.com/img/bd_logo1.png"  />
</div>

對圖片、行內元素、塊級元素都有效


15827882-9e99e1d72dbcbe92.png
text-align.png

2.margin: 0 auto

最常用的div水平居中方法

3.多個塊狀元素的水平居中

#container{
    text-align:center;
}
#center{
    display:inline-block;
}

4.Flex佈局中的水平居中

<style>
    #main {
        display: flex;
        flex-flow: row;
        justify-content: center;
        width: 400px;
        height: 400px;
        background-color: yellow;
    }
    #main > img{
        max-width: 50px;
    }
</style>
<div id='main'>
    <img src="https://www.baidu.com/img/bd_logo1.png"  />
</div>

二、垂直居中

1.vertical-align

值：top，middle，bottom，baseline（預設基線對齊）
vertical-align屬性只對行內元素有效，對塊內元素無效，比如

<style type="text/css">
    div.container{
        width: 400px;
        height: 200px;
    }
    img{
        max-width: 120px;
        max-height: 120px;
        vertical-align: middle;
        border: #ddd 1px solid;
    }
</style>
<div class="container">
    <p>我是一張<img src="https://www.baidu.com/img/bd_logo1.png"  />百度圖片</p>
</div>

圖片在行內垂直居中


15827882-7d8f7af0faf18816.png
vertical-align1.png

但是如下面寫在div裡：

<style type="text/css">
    div.container{
        width: 400px;
        height: 200px;
        background: red;
        vertical-align: middle;  
    }
    img{
        max-width: 120px;
        max-height: 120px;
        border: #ddd 1px solid;
    }
</style>
<div class="container">
    <img src="https://www.baidu.com/img/bd_logo1.png"  />
</div>

圖片並不能居中


15827882-25b9d8e7549b2b1a.png
vertical-align2.png
解決方法：

1）div加一個屬性display: table-cell;

<style type="text/css">
    div.container{
        width: 400px;
        height: 200px;
        background: red;
        vertical-align: middle;  
        display: table-cell;
    }
    img{
        max-width: 120px;
        max-height: 120px;
        border: #ddd 1px solid;
    }
</style>
<div class="container">
    <img src="https://www.baidu.com/img/bd_logo1.png"  />
</div>

2）加一個line-height與外面div同高的空span

<style type="text/css">
    div.container{
        width: 400px;
        height: 200px;
        background: red;
    }
    img{
        max-width: 120px;
        max-height: 120px;
        border: #ddd 1px solid;
        vertical-align: middle;
    }
    span{
        line-height: 200px;
    }
</style>
<div class="container">
    <img src="https://www.baidu.com/img/bd_logo1.png"  /><span></span>
</div>

3）加一個inline-block並且height為100%的空span

<style type="text/css">
    div.container{
        width: 400px;
        height: 200px;
        background: red;
    }
    img{
        max-width: 120px;
        max-height: 120px;
        border: #ddd 1px solid;
        display: inline-block;
        vertical-align: middle;
    }
    span{
        height: 100%;
        display: inline-block;
        vertical-align: middle; 
    }
</style>
<div class="container">
    <img src="https://www.baidu.com/img/bd_logo1.png"  /><span></span>
</div>
15827882-6c229fd48247f729.png
vertical-align3.png

2.給img設定一個死的margin-top值（不推薦）

3.多行文字的垂直居中

<style type="text/css">
.parent {
    display: table;
    width: 1000px;
    height: 500px;
}

.child {
    display: table-cell;
    vertical-align: middle;
}
</style>

<div class="parent">
    <div class="child">
        <p><span class="suc-tip">我是第一行</span><br/><span>我是第二行啊</span></p>
        <p style=""><span>第三行啦</span></p>
    </div>
</div>

三、整體居中

1.將水平居中與垂直居中相結合

2.將圖片設為背景

div.container{
    width: 400px;
    height: 200px;
    background: url(https://www.baidu.com/img/baidu_jgylogo3.gif) no-repeat center center;
}

相關文章