文字或是子div在父div里垂直居中

只有一行文字的话，直接用line-hight可以解决。

有多行文字或是想要子div在父div里垂直居中：

首先要理解vertical-align: middle只在table属性中才会垂直居中，应用到display:inline-block元素的话就是和隔壁元素居中对齐。

方法一：

在div里增加一个隐藏子元素，高度为100%和父div一样，这样再设置vertical-align: middle的话子div就会和父div一样高的子元素垂直居中对齐。

<style>
.box{
    float: left;
    margin: 20px;
    width: 200px;
    height: 200px;
    border: 1px solid #666;
}
.box img{
    width: 100px;
    height: 100px;
    vertical-align: middle;
}
.box span{
    display: inline-block;
    vertical-align: middle;
}
</style>

<style>
.demo2{
    font-size: 0;
}
.div_em{
    display: inline-block;
    *display: inline;
    *zoom: 1;
    height: 100%;
    vertical-align: middle;
}
.demo2 .txt{
    font-size: 12px;
}
</style>
<div class="demo2 box">
    <em class="div_em"></em>
    <img src="project/images/code.jpg" alt="">
    <span class="txt">文字<br>文字</span>
</div>

<!-- demo2改版 -->
<style>
.demo2_x{
    font-size: 0;
}
.demo2_x:after{
    content: '';
    display: inline-block;
    *display: inline;
    *zoom: 1;
    height: 100%;
    vertical-align: middle;
}
.demo2_x .txt{
    font-size: 12px;
}
</style>
<div class="demo2_x box">
    <img src="project/images/code.jpg" alt="">
    <span class="txt">ie8++<br>文字</span>
</div>

html

 

方法二：

把父div display:table,里面的子div display: table-cell;再设置vertical-align: middle

<style>
.demo3{
    display: table;
}
.demo3 .in{
    display: table-cell;
    vertical-align: middle;
}
</style>
<div class="demo3 box">
    <div class="in">
        <img src="project/images/code.jpg" alt="">
        <span class="txt">ie8++<br>文字</span>
    </div>
</div>

View Code

 

方法三：

用position:absolute；left:50%;top:50%;先把子div移动，然后再以子div的高度和宽度来设置margin-top：1/2子div高度;margin-right:1/2子div宽度

<style>
.demo4{
    position: relative;
}
.demo4 .in{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 100px;
    padding: 10px 0;
    background: #666;
    margin-left: -100px;
    margin-top: -60px;
}
</style>
<div class="demo4 box">
    <div class="in">
        <img src="project/images/code.jpg" alt="">
        <span class="txt">css3<br>文字</span>
    </div>
</div>

html

下面是用css3实现的，思路和上面一样

<style>
.demo5{
    position: relative;
}
.demo5 .in{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 200px;
}
</style>
<div class="demo5 box">
    <div class="in">
        <img src="project/images/code.jpg" alt="">
        <span class="txt">css3<br>文字</span>
    </div>
</div>

html

 

转载于:https://www.cnblogs.com/jellyAndjammy/p/3998808.html