css3子级高度与父级同高，内容垂直居中

 1 .E-wrap{
 2             overflow: hidden;
 3             position: relative;
 4             border: 1px solid #ccc;
 5             margin: 30px auto 0;
 6             width: 500px;
 7         }
 8         .E-left{
 9             position: absolute;
10             left: 0;
11             bottom: 0;
12             top: 0;
13             right: 80%;
14             border-right: 1px solid #ccc;
15             
16         }
17         .E-left li{
18             display: table;
19             width: 100%;
20             height:100%;
21         }
22         .E-left li p{
23             display: table-cell;
24             vertical-align: middle;
25             text-align: center;
26         }
27         .E-rihgt{
28             float: right;
29             width: 80%;
30         }
31         .E-rihgt li{
32             height: 40px;
33             line-height: 40px;
34             text-align: center;
35             border-bottom: 1px solid #ccc;
36         }
37         .E-rihgt li:last-child{
38             border-bottom:none;
39         }

<section class='E-wrap'>
    <ul class='E-left'>
        <li>
            <p>左侧文字</p>
        </li>
    </ul>
    <ul class='E-rihgt'>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>


</section>

 效果图

更多专业前端知识，请上 【猿2048】www.mk2048.com