我正在设计一个文本字段，我希望它垂直显示在 div 的中间。我希望黑色 div 垂直显示在蓝色 ( id=srch) div 的中心。
HTML 和 CSS：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
* {
vertical-align:baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border:0 none;
outline:0;
padding:0;
margin:0;
}
html {
height:100%;
}
#outerwrapper {
width: 90%;
height: 100%;
min-height: 100%;
height: auto !important;
border: solid thin #333;
}
body {
height: 100%;
width: 100%;
}
#header {
height: 80px;
width: 100%;
background-color:#999;
}
input {
border:solid thin #ab1;
}
#srch{
height:50px;
background-color:#00f;
}
#srch div{
margin: auto 0 auto 0;
width: 200px;
background-color: #000;
}
#contentWrapper {
width: 100%;
overflow: auto;
background-color:#0F0
}
</style>
</head>
<body>
<div id="outerwrapper">
<div id="header">Header
<div id="srch">
<div>
<input type="tel" name="aa"/>
</div>
</div>
</div>
<div id="contentWrapper">
Content Wrapper
</div>
</div>
</body>
</html>
我的方法：我给黑色 div 顶部和底部边距自动设置，但它不起作用（对于水平中心 [left 和 right margin:auto] 它也起作用）。margin:auto只对左右有效吗？
我想知道为什么会这样，我不想要任何其他解决方案，例如：
- 使用垂直对齐 div 显示内联文本。
- 以适当的填充或边距显示。