css3 flex盒子布局

最新推荐文章于 2025-07-03 15:45:27 发布

weixin_30750335

最新推荐文章于 2025-07-03 15:45:27 发布

阅读量57

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xudy/p/6195812.html

本文介绍了一种使用CSS实现水平垂直居中的方法，并展示了如何利用Flexbox进行元素布局。此外，还提供了一个具体的网页布局示例，包括导航栏的制作。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .nav{
                display: -webkit-flex;
                background-color: lightgreen;
                height: 100px;
            }
            .item{
                color: #FFF;
                flex: 1;
            }
            .first{
                width: 100px;
                background: red;
            }
            
            /*水平垂直居中   css*/
            .myoff{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50% , -50%);
                background-color: royalblue;
                width: 300px;
                height: 300px;
            }
            /*水平垂直居中 flex版本*/
            .parent{
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div class="nav" style="flex-direction: row-reverse;">
            <div class="first">哈哈</div>
            <div class="item">adsfasdf</div>
            <div class="item" style="flex: 2;">大厦法定是adsfasdf</div>
            <div class="first">呵呵</div>
        </div>
        <!--<div class="myoff">asdf</div>-->
        <div class="parent">
            <div style="width: 100px;height: 100px; background: red;">aaaaaaaaaaaa</div>
        </div>
    </body>
</html>