css里上下居中怎么弄？-木庄网络博客

本文摘自PHP中文网，作者little bottle，侵删。

css上下居中的实现方法：1、将单行的行内元素设置行高等于盒子高；2、将多行的行内元素使用给父元素设置“display:table-cell;和vertical-align: middle;”即可。

css里上下居中也就是垂直居中，css中按元素可以分为三种垂直居中方式，分别是单行的行内元素，多行的行内元素以及块元素的垂直居中，下面将做详细介绍。

单行的行内元素

只需要设置单行行内元素的"行高等于盒子的高"即可；

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
    }
  
    #son {
        background-color: green;
        height: 300px;
    }
</style>
  
<div id="father">
    <span id="son">我是单行的行内元素</span>
</div>

效果：

多行的行内元素

使用给父元素设置display:table-cell;和vertical-align: middle;即可；

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: table-cell;
        vertical-align:middle;
    }
  
    #son {
        background-color: green;
    }
</style>
  
<div id="father">