css元素如何垂直居中

最新推荐文章于 2023-07-16 21:39:10 发布

han_hanker

最新推荐文章于 2023-07-16 21:39:10 发布

阅读量139

点赞数

分类专栏： css 文章标签： css

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        *{padding:0px;margin:0px}
        .wrapper{
            position: relative;
            width: 200px;
            height: 200px;
            border: 1px solid #33ccff;
        }
        .content{
            position: absolute;
            width:100px;
            height: 100px;
            top:0;
            left:0;
            right:0;
            bottom:0;
            margin:auto;
            background: #ff0000;
        }
        .content2{
            position: absolute;
            top:30px;
            left:30px;
            right:30px;
            bottom:30px;
            margin:auto;
            background: #ff0000;
        }
        .content3{
            position: absolute;
            width:100px;
            height: 100px;
            top:50%;
            left:50%;
            margin-left:-50px;
            margin-top:-50px;
            background: #ff0000;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="content">

        </div>
    </div>
    <div class="wrapper">
        <div class="content2">

        </div>
    </div>
    <div class="wrapper">
        <div class="content3">

        </div>
    </div>
</body>
</html>
<script type="text/javascript">

</script>