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>

对图片、行内元素、块级元素都有效

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>

图片在行内垂直居中

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>

图片并不能居中

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>

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