Использование HTML Ширина CSS создает большой CLS, есть ли более эффективный способ?

Question

Я использую следующий CSS для центрирования текста на странице, но он, кажется, создает большой CLS (совокупный сдвиг макета). Есть ли более эффективный способ центрировать текст?

    @media only screen and (min-width: 1000px) {
        .page {
            width: 1000px;
            margin: 0 auto;
            font-size: 1.0em;
            line-height: 1.6em;
            font-family: Arial, sans-serif;
            word-wrap: break-word;
        }
    }

    @media only screen and (max-width: 999px) {
        .page {
            margin: 0 auto;
            font-size: 1.0em;
            line-height: 1.6em;
            font-family: Arial, sans-serif;
            word-wrap: break-word;
        }
    }

Проблема CLS возникает только в настольной версии, а не в мобильной версии, что заставляет меня думать, что это вариант width.

Answer 1

Оказывается, причиной кумулятивного сдвига макета было изображение неправильного размера и неправильной ширины, я сказал 700, когда на самом деле изображение было 702. Как ни странно, ошибка сообщалась не в том месте, ошибка была сообщается в другом блоке, а не там, где было изображение.

Если вы ищете причину CLS, посмотрите на размеры изображения. Это не было вызвано шириной стиля css. Мобильная версия работала, потому что я ее правильно определил.

Answer 2

У вас нет определенного width, поэтому значение по умолчанию auto применяется к ширине, которая составляет 100%. Центрирование элемента шириной 100% (с margin: 0 auto) в родительском элементе не имеет смысла: оно занимает всю ширину родительского элемента. Итак, вам нужно , чтобы определить width для вашей мобильной версии.