如何使用CSS在div中垂直居中窗体 video.html 代码：

问题1： 如何使用CSS在headerBar中垂直居中表单（文本框、组合框和按钮）？如果可能的话，我想坚持使用

而不是

。我希望它是动态居中的，这样，如果重新调整页面大小，它将重新居中。。。基本上它不能用px硬编码

问题2： 如何添加更多元素，再次使用

标记，使项目不居中，而是分别大约1/4和3/4。举个例子，图像中的顶部栏是YouTube.com。第二，是我的代码。我想将对象放置在YouTube徽标所在的位置。

问题3：（奖金） 这并不重要，只是额外的。在上面显示的图片中，是否可以在我的表单上获得准确的搜索栏和搜索按钮，但允许它具有我想要的任何功能

问题1：

从

div.headerBar

中删除高度，这样它将根据输入调整大小

如果你想要一个高度，那么不要使用高度。使用线条高度：

div.headerBar { line-height: 44px; }

问题#2:

.wrap{宽度：100%；}
.left{float:left；宽度：25%；}
.mid{浮动：左；宽度：50%；}
.right{浮动：左；宽度：24%；}
.clear{clear:两者；}

检查小提琴：

更新小提琴：

---

现在这更接近你想要的了。只要玩弄一下这些款式，就可以得到你想要的款式。

我希望头部的高度为44像素。我希望表格以这个为中心。我无法理解你的问题3。您拥有的代码与搜索栏完全相同。否。如果你看YouTube搜索按钮，按钮上有一个放大镜。两者似乎都是定制的。它们不是库存HTML。您可以删除

文本对齐：居中并对齐它，这样我就可以看到它是如何工作的？我不能让它工作。我还不明白，谢谢。这帮助最大。
.headerBar {
    background-color: #f1f1f1;
    width: 100%;
    height: 44px;
    border: 0px;
    padding:0px;
    margin:0px;
    position:fixed;
    top:0;
    left:0;
}

.searchForm {
    text-align: center;
    border: 0px;
    width: 100%;
    vertical-align: middle;
    position: relative;
}

div.headerBar { line-height: 44px; }

<div class="wrap">
    <div class="left"></div>
    <div class="mid"></div>
    <div class="right"></div>
    <div class="clear" />
</div>


.wrap { width: 100%; }
.left { float: left; width: 25%; }
.mid { float:left; width: 50%; }
.right { float:left; width: 24%; }
.clear { clear: both; }