На этой неделе я узнал: центрировать фиксированный элемент div изменяющейся ширины [2023–05–19]

Это маленький, но хороший.

Я хотел показать небольшое сообщение в своем веб-приложении, точно по центру, с динамическим содержанием. Мне потребовалось некоторое время, чтобы понять это, прочитав множество правил CSS, но решение, в конце концов, довольно простое.

Подвох в том, что он находится поверх всего остального, и казалось, что фиксированное положение для этого хорошо, поэтому обычные display: flex трюки у меня не сработали. Хуже того, каждый раз, когда я меняла содержимое, чтобы показать новое сообщение, правая сторона прыгала и исчезала.

Я нашел различные предложения в Интернете, но все они основывались на фиксированной ширине, которую я не хотел, потому что мои сообщения довольно сильно различаются по длине.

CSS:

.message {
    text-align: center;
    position: fixed;
    z-index: 1;
}

JavaScript:

function showMessage(text) {
    document.getElementById("id-of-your-p-element").innerText = text;
    const messageContainer = document.getElementById("id-of-your-outer-div");
    messageContainer.style.left = 
        `${(window.screen.width - messageContainer.offsetWidth) / 2}px`;
}

Очень маленький, в конце концов.