Выравнивание блока по вертикали HTML/CSS

367

24 ноября 2016, 10:16

Опять эта проблема с выравниванием по высоте.

*{ 
	margin: 0; 
	padding: 0; 
	text-decoration: none; 
	font-family: 'Roboto', sans-serif; 
} 
body{ 
	background: #fbfcfc; 
} 
#header{ 
	height: 350px; 
	width: 100%; 
	background: #525ea7; 
} 
#header_photo{ 
	height: 250px; 
	width: 250px; 
	background-image: url('http://aviasovet.ru/blog/wp-content/uploads/2014/05/%D0%A4%D0%BE%D1%82%D0%BE-%E2%84%96-1.jpg'); 
	background-size: 170%; 
  background-position: 50% 0; 
    background-repeat: no-repeat; 
	border-radius: 100%; 
	 
}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Notes</title> 
    <link rel="stylesheet" href="css/main.css" type="text/css"> 
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet"> 
</head> 
<body> 
	<div id="header"> 
		<div id="header_photo"> 
			 
		</div> 
	</div> 
</body> 
</html>

Answer 1

* { 
  margin: 0; 
  padding: 0; 
  text-decoration: none; 
  font-family: 'Roboto', sans-serif; 
} 
body { 
  background: #fbfcfc; 
} 
#header { 
  height: 350px; 
  width: 100%; 
  background: #525ea7; 
   
} 
#header:after { 
  content: ''; 
  display: inline-block; 
  vertical-align: middle; 
  height: 100%; 
} 
#header_photo { 
  display: inline-block; 
    vertical-align: middle; 
  height: 250px; 
  width: 250px; 
  background-image: url('http://aviasovet.ru/blog/wp-content/uploads/2014/05/%D0%A4%D0%BE%D1%82%D0%BE-%E2%84%96-1.jpg'); 
  background-size: 170%; 
  background-position: 50% 0; 
  background-repeat: no-repeat; 
  border-radius: 100%; 
}

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <title>Notes</title> 
  <link rel="stylesheet" href="css/main.css" type="text/css"> 
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet"> 
</head> 
 
<body> 
  <div id="header"> 
    <div id="header_photo"> 
 
    </div> 
  </div> 
</body> 
 
</html>

Answer 2

Вариант 2 flex:

*{ 
	margin: 0; 
	padding: 0; 
	text-decoration: none; 
	font-family: 'Roboto', sans-serif; 
} 
body{ 
	background: #fbfcfc; 
} 
#header{ 
	height: 350px; 
	width: 100%; 
	background: #525ea7; 
   
      display: flex; 
    flex-flow: column nowrap; 
    align-items: flex-start; 
    align-content: center; 
    justify-content: center; 
} 
#header_photo{ 
	height: 250px; 
	width: 250px; 
	background-image: url('http://aviasovet.ru/blog/wp-content/uploads/2014/05/%D0%A4%D0%BE%D1%82%D0%BE-%E2%84%96-1.jpg'); 
	background-size: 170%; 
  background-position: 50% 0; 
    background-repeat: no-repeat; 
	border-radius: 100%; 
	 
}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Notes</title> 
    <link rel="stylesheet" href="css/main.css" type="text/css"> 
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet"> 
</head> 
<body> 
	<div id="header"> 
		<div id="header_photo"> 
			 
		</div> 
	</div> 
</body> 
</html>