元素始终保持水平和垂直居中

最新推荐文章于 2024-01-15 15:37:29 发布

勤学daydayup

最新推荐文章于 2024-01-15 15:37:29 发布

阅读量788

点赞数 2

分类专栏： css 文章标签：元素水平和垂直居中

本文链接：https://blog.csdn.net/hncu1990/article/details/53264598

版权

css 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

实现此功能非常简单，只需要分两步走

父元素display:table-cell;，同时设置vertical-algin:middle;
子元素设置margin:0 auto;

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    #wrap {
        width: 100px;
        height: 100px;
        display: table-cell;
        vertical-align: middle;
        background-color: green;
    }
    .fl {
        margin:0 auto;
        width: 20px;
        height: 20px;
        background-color: red;
    }
    </style>
</head>
<body>
    <div id="wrap">
        <div class="fl"></div>
    </div>
</body>
</html>