html中元素盒子垂直居中的实现方法

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>元素盒子垂直居中的实现方法</title>
<style type="text/css">
#parent {
    width:500px;
    height:500px;
    background-color:#188eee;
display: table;}
#child {
    width:100px;
    height:auto;
    max-height:200px;
    overflow-y:scroll;
    
    display: table-cell;
    vertical-align: middle;
}
#child text{
    display:block;
    width:80%;
    margin-left:10%;
    height:40px;
    line-height:40px;
    background-color:#fff;
    text-align:center;
    border-bottom:1px #f1f1f1 solid;
}
#child text:last-child{
    border-bottom:0px;
}
</style>
</head>

<body>
<div id="parent">
    <div id="child">
        <text>111</text>
        <text>222</text>
        <text>333</text>
        <text>444</text>
        <text>555</text>
    </div>
</div>

</body>
</html>

 

posted @ 2017-09-07 10:57  生如逆旅,一苇以航  阅读(1569)  评论(0编辑  收藏  举报