Html+Css_div中的垂直居中布局

垂直居中的N中方法

http://www.cnblogs.com/chuncn/archive/2008/10/09/1307321.html

CSS中的vertical-align可以实现垂直居中布局，但是

1.它只对行内元素即 display:inline 的元素起作用，而对块级元素即 display:block 的元素并不起作用。

2.它只对(X)HTML元素中拥有valign特性的元素才生效，例如表格元素中的<td>、<th>、<caption>等，而像<div>、<span>这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用。 

但是在CSS中还有一个display属性能够模拟<table>，所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了。

注意，display:table 和 display:table-cell 的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个<div>元素：

核心代码：

/*边栏的属性*/
.board_aside{
    position: fixed;
    top:40%;
    left:90%;
    border:2px solid red;
    border-radius: 5px;
    width:40px;
    height:190px;
    z-index: 10;
    /*让父div模拟table,让其具有valign属性,使得子元素可以vertical-align属性*/
    display:table;
    background-color:#888888;
}

.board_aside .board_aside_list{
    /*让子div模拟table里面的元素,需要父div和子div配合使用*/
    display: table-cell;
    vertical-align:middle;
}

<div class="board_aside">
        <div class="board_aside_list">
            <div class="board_aside_parting_line"></div>
            <div class="board_aside_element">
                <a href="#about_us">
                    <img src="./src/img/aside_connect_us.png"/>
                </a>
            </div>
            <div class="board_aside_parting_line"></div>
            <div class="board_aside_element">
                <a href="#about_us">
                    <img src="./src/img/aside_service.png"/>
                </a>
            </div>
            <div class="board_aside_parting_line"></div>
            <div class="board_aside_element">
                <a href="#about_us">
                    <img src="./src/img/aside_attention.png"/>
                </a>
            </div>
            <div class="board_aside_parting_line"></div>
            <div class="board_aside_element">
                <a href="#top">
                    <img src="./src/img/aside_top.png"/>
                </a>
            </div>
            <div class="board_aside_parting_line"></div>
        </div>
    </div>

实现的效果：