Как центрировать все по вертикали CSS

121

12 февраля 2021, 11:20

Нужно отцентровать весь текст с кнопкой по вертикали. Пробовал много способов, но так ничего не получилось.

body { 
	background: #cc3354; 
	color: #ffffff; 
  font-family: 'PT Sans', sans-serif; 
} 
h1 { 
	font-size: 36pt; 
	margin-bottom: -15px; 
} 
.parent { 
	margin-left: auto; 
	margin-right: auto; 
 	padding: 10px; 
   	max-width: 1000px; 
}  
.child { 
    padding: 10px; 
    margin: 10px; 
    height: 40px; 
} 
button { 
	border-color: #ffffff; 
	font-size: 20pt; 
	text-align: center; 
	border-radius: 20px; 
	background: #cc3354; 
	padding: 10; 
	border: 2px solid #ffffff; 
	height: 42px; 
	width: 140px; 
} 
a:link { 
	color: #ffffff; 
  	text-decoration: none; 
} 
a:visited { 
	color: #ffffff; 
	text-decoration: none; 
} 
a:hover { 
	color: #ffffff; 
	text-decoration: none; 
} 
a:active { 
	color: #ffffff; 
	text-decoration: none; 
} 
.button-size { 
	width:100%; 
} 
.button-location { 
	float:right; 
}

<!DOCTYPE html> 
<html> 
<head> 
	<meta charset="UTF-8"> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>Внимание</title> 
	<link rel="stylesheet" href="style.css"> 
	<link href="https://fonts.googleapis.com/css?family=PT+Sans&display=swap" rel="stylesheet"> 
	<style type="text/css"> 
</head> 
<body> 
	<div class="parent"> 
		<div class="child"> 
			<div class="button-size"> 
				<h1>Внимание</h1> 
				<p>Русский писатель, философ и общественный деятель XIX века Владимир Одоевский в незаконченном утопическом романе «4338-й год», написанном в 1837 году, похоже, первым предсказал появление современных блогов и интернета: в тексте романа есть строки: «между знакомыми домами устроены магнетические телеграфы, посредством которых живущие на далёком расстоянии общаются друг с другом».</p> 
				<button class="button-location"><a class="button" href="http://site.com">Перейти</a></button> 
			</div> 
		</div> 
	</div> 
</body> 
</html>

Код почему-то не работает в Stack Overflow. Скорее всего из-за Google Fonts. Запускайте код отдельно.

Answer 1

Если я всё верно понял, то вам нужно центрировать контент страницы по вертикали. В таком случае, ваша проблема в том, что высота страницы подстраивается под высоту контента. Данный код решаем вашу проблему:

/* Вытягиваем саму страницу */
html{ height: 100%; width: 100%; }
body {
    padding: 0; margin: 0;
    background: #cc3354;
    color: #ffffff;
    font-family: 'PT Sans', sans-serif;
    /* Вытягиваем body на всю высоту страницы */
    height: 100%;
    position: relative; display: flex;
    align-items: center; /* Выравниваем по вертикали */
}

Но! Данный способ является, скажем так, не самым правильным. Лучше всего будет создать контейнер для элементов, и растянуть его на всю страницу, как в вашем коде я сделал с HTML.

Тот же код, но с вендорными префиксами:

/* Вытягиваем саму страницу */
html{ height: 100%; width: 100%; }
body {
    padding: 0; margin: 0;
    background: #cc3354;
    color: #ffffff;
    font-family: 'PT Sans', sans-serif;
    /* Вытягиваем body на всю высоту страницы */
    height: 100%;
    position: relative;
    display: -webkit-box;
        display: -webkit-flex;
            display: -ms-flexbox;
                display: flex;
    -webkit-box-align: center;
        -webkit-align-items: center;
            -ms-flex-align: center;
                align-items: center; /* Выравниваем по вертикали */
}

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

Answer 2

.button-size {
  display: flex;
  justify-content: center;
}

Это должно решить проблему.

Answer 3

.button-size {
  display: flex;
  justify-content: center; // центрирование по горизонтали 
  align-items: center; // центрирование по вертикали 
}

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как центрировать все по вертикали CSS

onMouseDown/Up на мобильных устройствах

Listbox обрезает кнопки по ширине [дубликат]

Групировка по нескольким фильтрам

Проиграть анимацию один раз