关于HTML中块中块的居中方法

这是我的代码：我想吧块里面的块居中，可试了很多方法不行，求大佬解答

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .fl{
                width: 80px;
                height: 50px;
                background-color: royalblue;
                float: left;
                margin-right: 5px;
                text-align: center;
                line-height: 50px;
                color: white;
            }
            .fe{
                width:1500px;
                height: 50px;
                background-color: skyblue;
            }
        </style>
    </head>
    <body>
        <div class="fe">
            <div class="fl">首页</div>
            <div class="fl">简介</div>
            <div class="fl">活动</div>
            <div class="fl">商品</div>
            <div class="fl">男士</div>
            <div class="fl">女士</div>
            <div class="fl" style="background-color: orange; color: black;">儿童</div>
        </div>
    </body>
</html>

图片说明

这个样式复制过去看一下，应该可以满足你的需求

.fl{
        width: 80px;
        height: 50px;
        background-color: royalblue;
        margin-right: 5px;
        text-align: center;
        line-height: 50px;
        color: white;
        display: inline-block;
    }
    .fe{
        width:1500px;
        height: 50px;
        background-color: skyblue;
        display: flex;
        align-items: center;
        justify-content: center;
    }

1.在不改变html结构的情况下只能把.fl转换成inline-block，然后给.fe设置text-align:center;
2. 可以使用flex布局居中，给.fe设置成flex，然后再设置justify-content:center;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .fe{
                width:1500px;
                height: 50px;
                background-color: skyblue;
                text-align: center;/* 子元素居中 */
            }
            .fl{
                display: inline-block;/* 转为行内块 */
                width: 80px;
                height: 50px;
                background-color: royalblue;
                /* float: left; */
                margin-right: 5px;
                /* text-align: center; */
                line-height: 50px;
                color: white;
            }
        </style>
    </head>
    <body>
        <div class="fe">
            <div class="fl">首页</div>
            <div class="fl">简介</div>
            <div class="fl">活动</div>
            <div class="fl">商品</div>
            <div class="fl">男士</div>
            <div class="fl">女士</div>
            <div class="fl" style="background-color: orange; color: black;">儿童</div>
        </div>
    </body>
</html>

做导航的话，里边不建议使用div，因为后期导航栏需要点击，并且要跳转到其他链接，所以用a标签来写的话会好些。

块中块居中的话，可以把里边的块转化为行内或者行内块元素，再对外块设置text-align:center；（文本居中）即可

使用flex布局，或者你使用transform:translateX(50%);