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

最新推荐文章于 2023-11-03 10:33:06 发布

weixin_33720078

最新推荐文章于 2023-11-03 10:33:06 发布

阅读量158

点赞数

<!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>

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33720078

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html中元素盒子垂直居中的实现方法

&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;元素盒子垂直居中的实现方法&lt;/title&gt;&lt;style type="text/css"&gt;#parent { width:500px;
复制链接

扫一扫