Question

我决定学习flexbox，所以我找到了这个视频（https://www.youtube.com/watch?v=Rf_DjL_dbug&t=3382s），但现在被困住了。我一步一步地完成了所有工作，涉及CSS的样式（视频50:40分钟-添加了transform：translateY（-50％）;之后），所有h2元素都在上升，而不是居中。

    @import url('https://fonts.googleapis.com/css?family=Open+Sans:400');
    @import url('https://fonts.googleapis.com/css?family=Raleway:300');
    * {
    	margin: 0;
    	padding: 0;
    	box-sizing: border-box;
    }
    html, body {
    	height: 100%;
    	background: #FFF;
    	text-align: center;
    	font: 1.15em/1 'Open Sans', sans-serif;
    	color: #FFF;
    }
    .wrapper {
    	background-color: #F5F5F5;
    	height: 100%;
    }
    #header {
    	background-color: #AFDED4;
    }
    .logo {
    	padding: 2%;
    }
    img {
    	max-width: 100%;
    }
    h2.dark {
    	color: #34495E;
    }
    h2 {
    	font: 300 2em/1 'Raleway', sans-serif;
    	color: #FFF;
    	padding: 2%;
    	position: relative;
    	top: 50%;
    	transform: translateY(-50%);
    }

    <div class="wrapper">
    	<div class="row" id="header">
    		<div class="col-12">
    			<img class="logo" src="img/flexy-logo.png"/>
    		</div>
    	</div>
    	<div class="row">
    		<div class="col-12">
    			<nav role="navigation" id="nav">
    				<input class="trigger" type="checkbox" id="mainNavButton">
    				<label for="mainNavButton" onclick>Menu</label>
    				<ul>
    					<li><a href="#">Home</a></li>
    					<li><a href="#">About Us</a></li>
    					<li><a href="#">Products</a></li>
    					<li><a href="#">Blog</a></li>
    					<li><a href="#">Specials</a></li>
    					<li><a href="#">Contact Us</a></li>
    				</ul>
    			</nav>
    		</div>
    	</div>
    	<div class="row">
    		<div class="col-12">
    			<img src="img/kite.png">
    		</div>
    	</div>
    	<div class="row">
    		<div class="col-12" style="padding: 2%;">
    			<h2 class="dark">Welcome to Flexy!</h2>
    		</div>
    	</div>
    	<div class="row" style="background-color: #3C8BB6; padding: 5% 0 3%;">
    		<div class="col-12">
    			<img src="img/paper.png">
    		</div>
    	</div>
    	<div class="row" style="background-color: #F6931E;">
    		<div class="col-11">
    			<h2>Get ready for take off!</h2>
    		</div>
    		<div class="col-3">
    			<img class="circle" src="img/take-off.png">
    		</div>
    	</div>
    <div class="row" style="background-color: #1ABC9C;">
    		<div class="col-11">
    			<h2>We're flying around the globe.</h2>
    		</div>
    		<div class="col-3">
    			<img class="circle" src="img/orange-globe.png">
    		</div>
    	</div>
    	<div class="row" style="background-color: #E5EF3F;">
    		<div class="col-11">
    			<h2 class="dark">Above the clouds &amp; over the sea.</h2>
    		</div>
    		<div class="col-3">
    			<img class="circle" src="img/waves.png">
    		</div>
    	</div>
    	<div class="row" style="background-color: #34495E;">
    		<div class="col-11">
    			<h2>In just 42 hours and 27 minutes.</h2>
    		</div>
    		<div class="col-3">
    			<img class="circle" src="img/plane.png">
    		</div>
    	</div>
    	<div class="row" style="background-color: #00AFE1;">
    		<div class="col-11">
    			<h2>So come along for the ride!</h2>
    		</div>
    		<div class="col-3">
    			<img class="circle" src="img/paper-blue.png">
    		</div>
    	</div>
    	<div class="row">
    		<div class="col-12">
    			<img src="img/plane-background.png">
    		</div>
    	</div>
    	<div class="row" style="background-color: #66D4FF;">
    		<div class="col-12">
    			<h2>Follow Us</h2>
    		</div>
    	</div>
    	<div class="row" style="background-color: #66D4FF;">
    		<div class="col-12">
    			<ul class="social">
    				<li><a href="#"><i class="fa fa-facebook"></i></a></li>
    				<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
    				<li><a href="#"><i class="fa fa-twitter"></i></a></li>
    				<li><a href="#"><i class="fa fa-youtube"></i></a></li>
    				<li><a href="#"><i class="fa fa-instagram"></i></a></li>
    			</ul>
    		</div>
    	</div>
    	<div class="row" style="background-color: #34495E; border-top: 2px solid 
    	#F6931E">
    		<div class="col-12">
    			<p>&copy; Flexy.</p>
    		</div>
    	</div>
    </div> <!---End Wrapper--->

我不知道我做错了什么。遵循视频中提到的指示。有人知道出什么问题吗？

Answer 1

视频中的人犯了一个错误。他写下了tranform而不是transform。他的代码从未应用过。我快速转发了整个视频，看看他是否将其固定在某处，但他没有。 translate(-50%)仅上升50％。我认为没有它，代码看起来很好！

transform：translateY（-50％）无法正常工作

1 个答案: