Вертикальное выравнивание в css отзыв

Этот вопрос может быть ответом, и это может показаться глупым. Я хотел бы выровнять любой элемент, будь то текст, изображение или div для выравнивания по центру по вертикали, и он также должен работать в чувствительных экранах. Я попробовал это, добавив margin-top с ручным процентом. Я хотел бы знать, есть ли простой и лучший способ сделать вертикальное выравнивание отзывчивым.Вертикальное выравнивание в css отзыв

Я даже сделал некоторые исследования в google об этом, некоторые из них предложили изменить свойство отображения контейнера на таблицу и ячейку div на таблицу, а затем использовать вертикальное выравнивание как среднее. Это звучит просто, но это также влияет на другие элементы на странице, которые я не хочу быть таблицей. Поэтому я ищу лучший альтернативный вариант. Пожалуйста помоги. Заранее спасибо :)

.in-middle{ 
 
    width:100%; 
 
    margin-top: 25%; 
 
}

<body> 
 
    <div class="in-middle"> 
 
    <h1>This should be aligned in the center</h1> 
 
    <p>Paragraph which should also be centered</p> 
 
    </div> 
 
</body>

источник

2016-11-10 Harish

Вы можете использовать следующее решение, используя tranform свойство:

.in-middle{ 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
}

<div class="in-middle"> 
 
    <h1>This should be aligned in the center</h1> 
 
    <p>Paragraph which should also be centered</p> 
 
</div>

Не рекомендуется использовать margin-top вместо tranform к элементам вертикального центра.

источник

2016-11-10 08:34:01

Это работает. Спасибо. После проверки кода я подумал, что margin-top также можно использовать вместо свойства transform. Это будет хорошо? – Harish

Я вижу. Спасибо, что дали мне знать. – Harish

position: absolute; 
    top: 50%; 
    transform: translateY(-50%);

это будет центрировать элемент по вертикали.

.in-middle{ 
 
    width:100%; 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
}

<body> 
 
    <div class="in-middle"> 
 
    <h1>This should be aligned in the center</h1> 
 
    <p>Paragraph which should also be centered</p> 
 
    </div> 
 
</body>

источник

2016-11-10 08:35:18

Вы должны использовать CSS3 flexbox. Он будет центрировать ваш контент вертикально и горизонтально, и он не будет перекрываться над содержимым, следующим за ним.

body { 
 
    margin: 0; 
 
} 
 
.in-middle { 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: center; 
 
    display: flex; 
 
    height: 100vh; 
 
}

<body> 
 
    <div class="in-middle"> 
 
    <h1>This should be aligned in the center</h1> 
 
    <p>Paragraph which should also be centered</p> 
 
    </div> 
 
    <p>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet...</p> 
 
</body>

источник

2016-11-10 08:43:08

Спасибо. Будет ли поддерживаться во всех браузерах? – Harish

@Harish да, IE10 + и большинство других браузеров поддерживают его. –

Спасибо. Я попробую. – Harish

С Flexbox:

.in-middle { 
    height: 100%;  
    display: flex; 
    align-items: center; 
} 

<body> 
    <div class="in-middle"> 
     <h1>This should be aligned in the center</h1> 
     <p>Paragraph which should also be centered</p> 
    </div> 
</body>

источник

2016-11-10 08:43:34 Alex

Вертикальное выравнивание в css отзыв

ответ

Смежные вопросы