据我所知这已被问了一百万次，但我只是在耗尽所有其他帖子后没有成功地自己发帖。我不想使用绝对定位，因为存在重叠的风险（特别是当它在移动版本中使用时）。
Attached is an image of the 3 elements inside the div
目前，徽标和搜索栏正在保持正确的位置，但我已经使用填充来实现这一点，我宁愿让它在所有浏览器中垂直居中。
我的主要问题是标题，我不能想到水平和垂直对齐的方法。 另请注意，标题当前位于col-md-8 div中。我希望它在那个之外完全位于标题div的中间。不幸的是，虽然当我尝试删除此标题时，它往往会推动其他2个元素。
以下是相关的html：
<div class="header w3-container" >
<!-- <div class="col-md-4 col-md-offset-4"> -->
<div class="col-md-8">
<div class="logo">
<img class="displayed" src="images/genericperson.png"/>
</div>
<div class="headline" >
<h1> SRC ONLINE </h1> */NEED THIS HEADER CENTERED VERTICALLY AND HORIZONTALLY */
</div>
</div>
<div class="col-md-4 ">
<form action="search.php" method="post">
<div class="input-group search">
<input name="search" type="text" class="form-control">
<span class="input-group-btn">
<button name="submit" class="btn btn-default" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form><!-- search form -->
</div>
</div>
这是css：
.header{
/*background-color: #434A54;*/
background-color: #00001a;
padding-bottom:20px;
width:100%;
}
.logo img{
padding-top:15px;
max-width:10%;
height:auto;
float:left;
}
.headline h1{
display:flex;
justify-content: center;
font-weight:bold;
font-size:1.5em;
color:white;
}
如果需要，这里是页面的源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Website developing</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<style>
body, html {
height: 100%;
}
.widget_Style{
margin-top: 20px;
}
h1{
padding:0;
margin:0;
}
.header{
/*background-color: #434A54;*/
background-color: #00001a;
padding-bottom:20px;
width:100%;
}
.logo img{
padding-top:15px;
max-width:10%;
height:auto;
float:left;
}
.headline h1{
display:flex;
justify-content: center;
font-weight:bold;
font-size:1.5em;
color:white;
}
.contentBase{
background-color:#333;
position:relative;
padding:0;
margin:0;
clear:both;
}
.author{
color:white;
float:left;
border-radius:0;
height:100%;
}
.contentBase a:hover{
color:white;
}
.btn-styling{
color:white;
background-color:red;
float:right;
border-radius:0;
}
.search{
padding-top:40px;
float:right;
vertical-align: middle;
}
.content_Box{
background-color: #EEEEEE;
padding-left: 10px;
padding-top:5px;
padding-bottom:5px;
}
/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
}
/* Float the list items side by side */
ul.topnav li {float: left;}
/* Style the links inside the list items */
ul.topnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 14px;
border-right: 1px solid #00001a;
}
.noBorder{
border-right: none;
}
#categoryRight{
float:right;
}
#lastli{
border-right: none;
}
.navigation{
background-color:#333;
}
#loginimage{
padding-bottom:8px;
height:25px;
}
.clear {
clear: both;
}
.margintop{
margin-top:10px;
}
.mainContent{
}
/* Change background color of links on hover */
ul.topnav li a:hover {background-color: red;}
/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}
@media screen and (max-width:680px) {
/*ul.topnav li:not(:first-child) {display: none;} */
ul.topnav li{display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
img.displayed {
display: block;
margin: auto;
float:none;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
#categoryRight{
float:none;
}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
border:none;
}
}
li a, .dropbtn {
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
width:100%;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
display: inline-block;
}
li.dropdown {
z-index: 1000;
}
.dropdown-content {
display: none;
list-style:none;
padding:0;
margin:0;
width:100%;
position: absolute;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content li{
display:block; padding:0; margin:0; width:100%;
}
.dropdown-content a {
display:block;
box-sizing:border-box;
width:100%;
color: black;
padding: 12px 16px;
text-decoration: none;
text-align: center;
}
.dropdown:hover .dropdown-content{
background-color: #333;
display:block;
}
.dropdown-content a:hover {background-color: #333;
}
.dropdown:hover .dropdown-content {
display: block; !important
}
</style>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.7";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="header w3-container" >
<!-- <div class="col-md-4 col-md-offset-4"> -->
<div class="col-md-8">
<div class="logo">
<img class="displayed" src="images/genericperson.png"/>
</div>
<div class="headline" >
<h1> SRC ONLINE </h1>
</div>
</div>
<div class="col-md-4 ">
<form action="search.php" method="post">
<div class="input-group search">
<input name="search" type="text" class="form-control">
<span class="input-group-btn">
<button name="submit" class="btn btn-default" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form><!-- search form -->
</div>
</div>
<div class="navigation w3-container clearfix" >
<ul class="topnav" id="myTopnav" >
<li> <a href='index.php'><span class='glyphicon glyphicon-home'></span> Home</a></li><li> <a href='#'><span class='glyphicon glyphicon-flash'></span> Latest update</a></li><li> <a href='#'><span class='glyphicon glyphicon-pencil'></span> SSC</a></li><li class='dropdown'><a href='#' class='dropbtn' ><span class='glyphicon glyphicon-folder-open'></span> Study Material</a>
<ul class='dropdown-content'>
<li> <a href='#' class='noBorder'>Link 1</a></li>
<li><a href='#' class='noBorder'>Link 2</a></li>
<li><a href='#' class='noBorder'>Link 3</a></li>
</ul>
</li><li class='dropdown'><a href='#' class='dropbtn' ><span class='glyphicon glyphicon-education'></span> Result</a>
<ul class='dropdown-content'>
<li> <a href='#' class='noBorder'>Link 1</a></li>
<li><a href='#' class='noBorder'>Link 2</a></li>
<li><a href='#' class='noBorder'>Link 3</a></li>
</ul>
</li><li> <a href='#'><span class='glyphicon glyphicon-file'></span> Other Exams</a></li><li> <a href='#'><span class='glyphicon glyphicon-usd'></span> Other Jobs</a></li><li> <a href='#'><span class='glyphicon glyphicon-phone-alt'></span> Contact</a></li><li id='categoryRight'><a id= 'lastli' href='#'><img id='loginimage' src='images/genericperson.png'> login</a></li><li class='icon'>
<a id='lastli' href='javascript:void(0);' onclick='myFunction()'>☰</a>
</li>
<!-- <li id="home"><a href="#home">Home</a></li>
<li ><a href="#news"><img id="loginimage" src="images/genericperson.png" > Log in</a></li>
<li><a href="#contact">Contact</a></li>
<li id="aboutli"><a id="aboutborder" href="#about">About</a></li>
<li class="icon">
<a id="lastli" href="javascript:void(0);" onclick="myFunction()">☰</a>
</li>
-->
</ul>
</div>
<!-- Page Content -->
<div class="container mainContent">
<div class="row">
<!-- Blog Entries Column -->
<div class="col-md-3">
</div>
<div class="col-md-6">
<h2 class="page-header">
Latest updates
<small>local news</small>
</h2>
<div class="content_Box">
<!-- First Blog Post -->
<h2>
<a href="#">First SSC post</a>
</h2>
<p><span class="glyphicon glyphicon-time"></span>2016-09-01</p>
<p>hola everyone. The site is getting somewhere!</p>
</div>
<div class="contentBase clearfix">
<a class="btn author" href="index.php">Hasman404</a>
<a class="btn btn-styling" href="#">Read More <span class=" glyphicon glyphicon-chevron-right"></span></a>
</div>
<br><br>
<div class="content_Box">
<!-- First Blog Post -->
<h2>
<a href="#">Second post on SSC</a>
</h2>
<p><span class="glyphicon glyphicon-time"></span>2016-08-02</p>
<p>Now were trying to spice things up abit by adding this here.Lets see if this looks good. Need to style it all. Page heading should be resticted to one.</p>
</div>
<div class="contentBase clearfix">
<a class="btn author" href="index.php">Peter</a>
<a class="btn btn-styling" href="#">Read More <span class=" glyphicon glyphicon-chevron-right"></span></a>
</div>
<br><br>
<!--This function is responsible for your posts generation -->
</div>
<!-- Blog Sidebar Widgets Column -->
<div class="col-md-3">
<!-- Side Widget Well -->
<div class="widget_Style">
<div class="fb-page" data-href="https://www.facebook.com/facebook" data-tabs="timeline" data-small-header="false" data-height="220" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/facebook" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote></div>
</div>
<!-- Blog Categories Well -->
<!-- <div class="well"> -->
<!--
<h4>Blog Categories</h4>
<div class="row">
<div class="col-lg-12">
<ul class="list-unstyled">
</ul>
</div>
</div>
-->
<!-- /.row -->
<!-- </div> -->
</div>
</div>
<!-- /.row -->
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Your Website 2016</p>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</footer>
</div>
<!-- /.container -->
<script>
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
var y = document.getElementById("logo");
y.className += " responsive";
}
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
<!--
<div class="container margintop clear">
<div class="row">
<div class="col-md-4">
<div class="upcomingevents">
<h1> Upcoming events </h1>
</div>
</div>
<div class="col-md-4">
<div class="highlightbox">
</div>
<div class="highlightbox">
</div>
<div class="highlightbox">
</div>
</div>
<div class="col-md-4">
<div class="noticeboard">
</div>
</div>
</div> <!-- Row ends here
</div>
-->
提前谢谢！我永远感激不尽。