pozycjonowanie diva w pionie, fullpage scrolling

pytanie zadane 16 stycznia 2019 w HTML i CSS przez Cheatsu Nowicjusz (120 p.)

Cześć,
chciałbym aby div "wycieczka" był w centralnej części ekranu, na stronie użyłem fullpage scrolling i nie do końca wiem, jak na danej "stronie" wypozycjonować pion.

<!DOCTYPE html>
<html lang="pl">
<head>

	<meta charset="utf-8">
	<meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome1">
	
	<link rel="stylesheet" href="style.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.js"></script>
	<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
	<script src="jquery.fullpage.js"></script>
	
</head>

<body>
	<div id="fullpage">
		<section>
			<h1>jakis tekst na powitanie</h1>
		</section>
		
		<section>
			<div id="wycieczka">
			</div>
		</section>
		<section>
			<h1>Twórcy</h1>
		</section>
	</div>
	<script type="text/javascript">
		FastClick.attach(document.body);
		$('#fullpage').fullpage();
	</script>
	
</body>
</html>

body
{
	margin: 0;
	padding: 0;
	font-family: OCR A Std;
	color: white;
}
body h1
{
	text-shadow: black 0.1em 0.1em 0.2em 
}

#fullpage
{
	height: 100vh;
	overflow: hidden;
}

#fullpage section
{
	height: 100vh;
}

#fullpage section h1
{
	margin: 0;
	padding: 0;
	text-align: center;
	line-height: 100vh;
	font-size: 5em;
}

#fullpage section:nth-child(1)
{
	background-image: url(background.jpg);
	background-size: cover;
}

#fullpage section:nth-child(2)
{
	background-image: url(background2.jpg);
	background-size: cover;
}

#fullpage section:nth-child(3)
{
	background-color: grey;
}

#wycieczka
{
	width: 80%;
	height: 80%;
	background-image: url(wycieczka.jpg);
	margin-left: auto; 
	margin-right: auto;
}

2 odpowiedzi

odpowiedź 16 stycznia 2019 przez lateM Pasjonat (17,660 p.)
edycja 16 stycznia 2019 przez lateM

Na przykład używając flexboxa?

.wycieczka{
  display: flex;
  justify-content: center;
  align-items: center;
}

 <section id="wycieczka" class="wycieczka">
      <div class="wycieczka__dziecko">
<!-- Jakaś treść -->
      </div>
</section>

+ nie zdziw się, że nie zadziała - masz tam przecież line-height: 100vh;, które wszystko rozpycha.

W ten sposób sekcja jest "kontenerem", a div wycieczka__dziecko jest "itemem" - itemów możesz wrzucić do kontenera kilka, wszystkie powinny zostać wycentrowane. Tutaj bardziej szczegółowo.

Znajdziesz w sieci masę tricków jak coś wycentrować w pionie i poziomie, ale to jest chyba najszybszy sposób...