top:0; bottom:0; margin:auto; で縦中央にならない。。

<!DOCTYPE html>
<head>
<meata lang="ja">
<link rel="stylesheet" type="text/css" href="design.css">
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
</head>
<body>
<header>
	<div class="title">Title </div>
	<div class="navToggle">
		<div>
			<span></span>
			<span></span>
			<span></span>
		</div>	
	</div>	
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">What is it?</a></li>
		<li><a href="#">Contact</a></li>
		<li><a href="#">twitter</a></li>
	</ul>		
</header>
<script>
$('.navToggle').on('click',function(){
	$('header ul').toggleClass('showing');  //toggleは二回押すと元通りになる（on,offの機能)
});
</script>	
</body>

body{
	padding:0;
	margin:0;
}
a{
	text-decoration: none;
}
header{
	position:relative; /*親要素relative指定*/
	top:0px;
	left:0px;
	width:100%;
	height:8em;
	background-color: #F5A9A9;
}
.title{
	font-size: 40px;
	color:white;
	font-family: arial black;
	position:absolute;
	left: 5%;
        /*↓ここでの指定が題名の通り効かない */
	top:0;
	bottom:0;
	margin:auto;
}
/*navToggleはハンバーガーメニューのボタン*/
.navToggle{
	display:none;
	position:absolute;
	right:20px;
	top:0;
	bottom:0;
	margin:auto;
	width:30px;
	height:25px;
	cursor:pointer;
	border:solid 1px white;
	padding:5px 5px 0 5px;
    border-radius: 5px;
}
.navToggle div{
	position: relative; 
}
.navToggle span{
	display:block;
	width:100%;
	border-bottom:solid 3px white;
	margin-bottom:5px;
}
header ul{
	position:absolute;
	top:0;
	bottom:0;
	right:5%;
	margin:auto;
	vertical-align: middle; 
	display:table;
	-webkit-transition: max-height 0.4s;
	-ms-transition: max-height 0.4s;
	-moz-transition: max-height 0.4s;
	-o-transition: max-height 0.4s;
	transition: max-height 0.4s;
}
header li{
	border-right:solid white 0.5px;
	color:black;
	display:table-cell;
	padding-right:10px;
	padding-left: 10px;
	font-size: 15px;
	cursor:pointer;
}
header ul li a{
	color:black; 
}
.header_scrolled{

}


@media screen and (max-width:780px){
	.navToggle{
		display:block;
	}
	.showing{  /*このクラスをjqueryでulに追加する*/
		bottom:0;
        left:0;
        right:0;
		max-height:20em;
	}
	header ul{
		max-height: 0; 
		position:relative;
		top:128px;
		right:0px;
		display:block; 
		width:100%;
		padding:0;
		overflow: hidden; 
		background-color:rgba(0,0,0,0.8);
	}
	header ul li{
		box-sizing:border-box;
		width:100%; 
		padding:15px;
		display:block;
		text-align: center;
		border-bottom:solid 1px #777;
	}
    header ul li a {
		color:white;
	}	
}

行動規範の内容に同意します

回答1件

ベストアンサー

CSS
1.title {
2    font-size: 40px;
3    color: white;
4    font-family: arial black;
5    position: absolute;
6    left: 5%;
7    /*top: 0;*/
8    top: 50%; /* ADD */
9    /*bottom: 0;*/
10    margin: auto;
11    transform: translateY(-50%); /* ADD */
12}
13```**動くサンプル：**[https://jsfiddle.net/yabwypr9/](https://jsfiddle.net/yabwypr9/)

投稿2017/05/04 06:12

kei344

総合スコア69621

kazoogon

2017/05/04 07:28

回答ありがとうございます。この回答についてなのですが、ハンバーガーメニューのボタンのnavToggleクラスはdivでブロック要素とtitleクラスと性質が一緒だと思うのですが、こちらは position:absolute; top:0; bottom:0; margin:auto; で上下中央になっています。　一体違いは何でしょうか？？