移动端Logo居中仅Firefox生效，Chrome无效的原因问询

DevOps 小满

2026-8-19

移动端Logo居中适配问题及解决思路

我尝试用媒体查询实现移动端Logo居中，该设置仅在Firefox浏览器生效，Chrome中完全没反应。按朋友建议删除.nav-left、移除.nav的padding和height属性并将justify-content改为center后，初始无效果，重启Live Server才正常，这情况很奇怪。

项目信息：

Github在线演示地址：https://luffydrank.github.io/FreeCodeCamp-Product-Landing-Page/
Github仓库地址：https://github.com/LuffyDrank/FreeCodeCamp-Product-Landing-Page

相关代码

CSS代码

body {box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;margin: 0px;padding: 0px;font-family: 'Roboto Mono', monospace;overflow-x: hidden;}.nav {position: absolute;top: 0;left: 0;right: 0;display: flex;justify-content: space-between;align-items: center;padding: 45px 20px;height: 50px;}.nav-right {width: 70%;}.nav-left {display: flex;justify-content: center;align-items: center;width: 30%;}.nav-right ul {display: flex;gap: 30px;list-style: none;font-size: 1.728rem;font-weight: 900;align-items: center;text-align: center;justify-content: space-evenly;margin: 0;padding: 0;}.nav-right ul a {text-decoration: none;color: #EA6129;padding: 5px;text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;}.nav-right ul a:hover{color: #f8daac;background-color: #fd551b;border-radius: 10px;}#welcome {padding: 150px 0px 100px 0px;display: flex;justify-content: space-evenly;align-items: center;width: 100%;object-fit: cover;height: 80vh;background-image: url(./images/burger-unsplashdark.jpg);background-size: 100vw 100%;}#welcome-text {margin: 50px;}#welcome-title {font-size: 2.488rem;text-align: center;color: white;padding: 20px;border-radius: 5%;}#welcome-subtitle {text-align: center;font-size: 1.5em;color: rgba(255, 255, 255, 0.93);padding: 20px;border-radius: 5%;}#welcome-img {width: 40%;margin: 50px;border-radius: 5%;padding: 20px;}.acerca-div {display: flex;align-items: center;padding: 10px 50px;gap: 50px;color: white;background-color: rgba(0, 0, 0, 0.75);border-radius: 10px;}#logo {height: 150px;}.icon {width: 100px}.icon2 {width: 50px}#acerca {padding: 50px;background-image:url(./images/stars-unplash.jpg);object-fit: cover;background-size: 100% 100%;display: flex;flex-direction: column;gap: 75px;}.menu {display:flex;flex-wrap: wrap;background-image:url(./images/table-unplash.jpg);background-size: 100% 100%;}.menu-img {width: 40vw;}.menu-div {margin: 50px;text-align: center;}.media {display: flex;flex-wrap: wrap;}#contacto {display:flex;justify-content: center;gap: 50px;align-items: center;padding: 50px;flex-direction: column;}.center {display:flex;justify-content: center;align-items: center;text-decoration: none;color: black;gap: 10px;color: #EA6129;}.center p {padding: 10px;}.center p:hover {color: #f8daac;background-color: #fd551b;border-radius: 10px;}.contacto-icons {display: flex;justify-content: center;gap: 50px;background-color: rgba(0, 0, 0, 0.75);padding: 25px;border-radius: 10px;}.contacto-location {background-color: rgba(0, 0, 0, 0.85);padding: 25px;border-radius: 10px;color: white;}.image-carousel-img {width: 40vw;}#contacto {background-image:url(./images/stars-unplash.jpg);background-size: 100% 100%;object-fit: cover;}#map {width: 50vw;}video {display: none;}.media {display:flex;justify-content: center;align-items: center;flex-wrap: wrap;background-image:url(./images/stars-unplash.jpg);background-size: 100% 100%;object-fit: cover;padding: 50px;gap: 10px;}footer {background-color: black;text-align: center;color: white;padding: 20px;}.footer a{color: #fd551b;text-decoration: none;padding: 5px;}.footer a:hover {color: #f8daac;background-color: #fd551b;border-radius: 10px;}.footer h1 {margin: 0px;}@media only screen and (max-width: 768px) {.nav-right {display: none;}.nav {display: flex;justify-content: center;align-content: center;}}

HTML代码

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="FreeCodeCamp project">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <title>Product Landing Page</title>
</head>
<body>
    <nav>
        <div class="nav">
            <div class="nav-left">
                <img id="logo" src="./images/logo.png" alt="Logo">
            </div>
            <div class="nav-right">
                <ul>
                    <a href="#acerca"><li>Acerca de nosotros</li></a>
                    <a href="#menu"><li>Menu</li></a>
                    <a href="#contacto"><li>Contacto</li></a>
                </ul>
            </div>
        </div>
    </nav>
    <main>
        <section>
            <div id="welcome">
                <div id="welcome-text">
                    <h1 id="welcome-title">La mejor comida rapida en Chivacoa</h1>
                    <p id="welcome-subtitle">Disfruta de las mejores hamburguesas y de los mejores perros calientes de la zona</p>
                </div>
                <img id="welcome-img" src="./images/comida4.jpg" alt="Foto de hamburguesas">
            </div>
        </section>
        <section>
            <div id="acerca">
                <div class="acerca-div">
                    <img class="icon"  src="./images/2295341.png" alt="">
                    <div>
                        <h1>Comida de calidad</h1>
                        <p>Nos encargamos de comprar solamente a marcas confiables para realizar nuestra comida,las cuales aseguran la calidad y hiene de los alimentos</p>
                    </div>
                </div>
                <div class="acerca-div">
                    <img class="icon" src="./images/2295343.png" alt="">
                    <div>
                        <h1>El mejor sabor</h1>
                        <p>Realizamos una gran comida para disfrutar con tus amigos familia o pareja</p>
                    </div>
                </div>
                <div class="acerca-div">
                    <img class="icon" src="./images/2295342-2.png"" alt="">
                    <div>
                        <h1>Al mejor precio</h1>
                        <p>Ofrecemos un increible precio por nuestra comida, ¡no te lo pierdas!</p>
                    </div>
                </div>
            </div>
        </section>
        <section>
            <div id ="menu" class="menu">
                <div class="menu-div">
                    <img class="menu-img" src="./images/comida.jpg" alt="">
                    <h2>Hamburguesa La Especial</h2>
                    <p>Lechuga Y tomate</p>
                </div>
                <div class="menu-div">
                    <img class="menu-img" src="./images/comida.jpg" alt="">
                    <h2>Perro Normal</h2>
                    <p>Salchicha</p>
                </div>
                <div class="menu-div">
                    <img class="menu-img" src="./images/comida.jpg" alt="">
                    <h2>Hamburguesa Normal</h2>
                    <p>Lechuga</p>
                </div>
            </div>
        </section>
        <section>
            <div id="contacto">
                <div class="contacto-icons">
                    <a class="center" target="_blank" href="https://www.a00b.com/">
                        <img class="icon2" src="./images/facebook.svg" alt="">
                        <p>Facebook</p>
                    </a>
                    <a class="center" target="_blank" href="https://www.kelid1.ir">
                        <img class="icon2" src="./images/whatsapp.svg" alt="">
                        <p>04120586545</p>
                    </a>
                    <a class="center" target="_blank" href="https://wa.me/584125618239">
                        <img class="icon2" src="./images/whatsapp.svg" alt="">
                        <p>04125618239</p>
                    </a>
                    <a class="center" target="_blank" href="https://l.messenger.com/l.php?u=https%3A%2F%2Finstagram.com%2Ftonysburguerrestaurant%3Figshid%3DYmMyMTA2M2Y%253D&h=AT1oKhmXMGzO7W6QbzarGqNW21grgXSDWEK10e2nzW5zLngj5Fow5bd0Dzv4uW1pGLzYuI9dPBOWXSIyzDzQUGvBV0S-T6txT409OBOSEKDJ_x_y8TjBitG45KkTcphGyvez1Q">
                        <img class="icon2" src="./images/instagram.svg" alt="">
                        <p>Instagram</p>
                    </a>
                </div>
                <div class="contacto-location">
                    <h2>Avenida 5 entre calle 10 y 11 Chivacoa Yaracuy</h2>
                </div>
                <iframe id="map" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15709.037785755107!2d-68.8942656!3d10.1595538!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xd4139ed8d2ec512b!2sTony&#39;s%20Burguer%20Restaurant!5e0!3m2!1ses-419!2sve!4v1662776058859!5m2!1ses-419!2sve" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>
        </section>
        <section>
            <div class="media">
                <video src="" alt=""></video>
                <img class="image-carousel-img" src="./images/lugar.jpg" alt="">
                <img class="image-carousel-img" src="./images/lugar.jpg" alt="">
                <img class="image-carousel-img" src="./images/lugar.jpg" alt="">
                <img class="image-carousel-img" src="./images/lugar.jpg" alt="">
            </div>
        </section>
    </main>
    <footer>
        <div class="footer">
            <h1>Website made by <a href="">LuffyDrank</a></h1>
        </div>
    </footer>
</body>
</html>

问题分析与解决办法

1. 跨浏览器适配失效原因

原媒体查询仅修改了.nav的justify-content，但.nav-left仍保留width:30%的固定宽度。Chrome中，flex容器的子元素会严格遵循自身宽度设定——即使.nav-right隐藏，.nav-left只占容器30%宽度，自然无法真正居中。Firefox对flex布局的宽度计算逻辑略有差异，才出现了看似正常的表现。

2. 修改后需重启Live Server的原因

这是浏览器缓存导致的：Live Server默认会缓存静态资源（比如CSS文件），修改代码后可能没有立即触发资源刷新。无需重启服务，直接按Ctrl+Shift+R强制刷新浏览器页面，也能加载新的CSS规则。

3. 优化的移动端居中方案

无需删除.nav-left，直接在媒体查询中调整相关属性即可，既保留原有结构又实现跨浏览器一致的居中效果：

@media only screen and (max-width: 768px) {
    .nav-right {
        display: none;
    }
    .nav {
        justify-content: center;
        padding: 0;
        height: auto;
    }
    .nav-left {
        width: 100%;
    }
}

或者更简化：让.nav-left占满容器宽度，配合.nav的justify-content: center，就能确保Logo在移动端完全居中。另外，确认HTML中的<meta name="viewport">标签已正确设置width=device-width, initial-scale=1.0，这是移动端适配的基础，避免浏览器缩放导致媒体查询触发异常。

内容的提问来源于stack exchange，提问作者LuffyDrank

移动端Logo居中仅Firefox生效，Chrome无效的原因问询

相关代码 #

CSS代码 #

HTML代码 #

问题分析与解决办法 #

1. 跨浏览器适配失效原因 #

2. 修改后需重启Live Server的原因 #

3. 优化的移动端居中方案 #