垂直居中兼容性很好的方法

最新推荐文章于 2022-07-05 17:12:26 发布

web控

最新推荐文章于 2022-07-05 17:12:26 发布

阅读量505

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS3

本文链接：https://blog.youkuaiyun.com/qq_27892551/article/details/50980301

CSS3 专栏收录该内容

6 篇文章

订阅专栏

   <style>
        .father{
            width:200px;
            height:200px;;
            border:1px solid chartreuse;
            text-align: center;
            /*垂直居中的关键*/
            display: table-cell;
            vertical-align: middle;
        }
        .children{
            width:30%;
            height:50px;
            text-align:center;
            border:1px solid black;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="children">
    </div>
</div>
</body>