区块水平，垂直以及浮动后居中方式小结

最新推荐文章于 2024-07-08 17:02:45 发布

稳稳DE幸福

最新推荐文章于 2024-07-08 17:02:45 发布

阅读量380

点赞数 1

文章标签： css3

本文链接：https://blog.csdn.net/gouhuarong/article/details/51815955

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!--<link rel="stylesheet" href="global.css"/>-->
    <style>
        .big1{
            width: 1200px;
            height: 200px;
            background-color: darkkhaki;
            position: relative;
        }
        .childO{
            width: 50px;
            height: 50px;
            background-color: #ac2925;
            /*在设置了宽度的情况下，子级在父级里自适应水平居中*/
            margin: auto;
        }
        .childT{
            width: 50px;
            height: 50px;
            background-color: #ff335e;
            margin: auto;
            /*水平、垂直都居中，利用定位的方式，父级必须先设定非静态定位*/
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
        }
        /*垂直居中*/
        .childTh{
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            top: 50%;
            margin-top: -50px;
        }
        .big2{
            width: 1200px;
            height: 200px;
            margin-top: 50px;
            background-color: #bec7d0;
            position: relative;
        }
        .childOO{
            width: 150px;
            height: 150px;
            background-color: #407cac;
            /*浮动水平\垂直居中*/
            float: left;
            display: inline-block;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -75px;
            margin-top: -75px;
        }
    </style>
</head>
<body>
<!--水平居中-->
    <div class="big1">
        <div class="childO">水平居中</div>
        <div class="childT">水平、垂直都居中</div>
        <div class="childTh">垂直居中</div>
    </div>
    <div class="big2">
        <div class="childOO">浮动水平、垂直居中</div>
    </div>
 </body>
</html></pre><br />

稳稳DE幸福

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
区块水平，垂直以及浮动后居中方式小结

html>html>head lang="en"> meta charset="UTF-8"> title>title> --> style> .big1{ width: 1200px; height: 200px; background-color: d
复制链接

扫一扫