Css Can'；t垂直居中我的标志

左上角的徽标未居中。这是我的密码：

.header_col1 {
    float: left;
    width: 20%;
    background: #009240;
    text-align: center;
    position: relative;
}
.header_col1 a {    /* my logo */
    display: inline-block;
    vertical-align: middle;
}

---

然而，根据我读到的文章，这种技术应该是有效的。在这种情况下为什么不呢？我不想使用绝对定位，因为徽标周围的绿色区域以较小的分辨率缩小，徽标也必须这样做。

使用显示表魔术：-）

---

我会把它放在变换的中心

.header_col1 a {    /* my logo */
    display: inline-block;
    vertical-align: middle;
    position: relative;
    padding: .5em;
    top: 50%;
    transform: translateY(-50%);
}

---

编辑：添加了

填充：.5em

当容器开始收缩时，在较小的屏幕上给徽标一些喘息的空间。

您需要设置一个与

高度相等的线条高度。

此技术才能工作：

.header_col1 {
    float: left;
    width: 20%;
    background: #009240;
    text-align: center;
    position: relative;
    line-height: 110px;
}
.header_col1 a {    /* my logo */
    display: inline-block;
    vertical-align: middle;
}

…并且img需要是块元素：

.header_col1 a img {
    display: block;
}

编辑： 添加此选项以保留灵活的大小调整：

.header_col1 a {
    width: 100%;
}
.header_col1 a img {
    max-width: 100%;
}

---

新的炎热将是这样的

.header_col1 {
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;

}
.header_col1 a {    /* my logo */
    margin: auto;
}

注意：随着时间的推移，供应商前缀

-webkit--moz-ms-

将不再使用

以下是一个示例：

好处：将图像调整为容器大小是另一个问题。。然而，答案是

width:100%；高度：自动在最简单的情况下。
试试这个

.header_col1:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}

.header_col1 a {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
}

我在锚定标签上添加了
线高度


这里有一种方法

将
display:table cell
应用于包装图像的
a
元素，并从
.header-col1
祖先块继承宽度和高度

然后可以使用
垂直对齐：中间
和
文本对齐：中心
来获得所需的对齐方式。如果左右边缘需要一些空白，请添加一些左右填充

最后，要使图像响应，请设置
宽度：100%
，并使用
垂直对齐：顶部
处理基线问题下方的空白


.header\u col1、.header\u col2{
高度：110px；
}
.1头_col1{
浮动：左；
宽度：20%；
背景#009240无重复滚动0%0%；
文本对齐：居中；
位置：相对位置；
}
.标题(col1 a){
垂直对齐：中间对齐；
显示：表格单元格；
文本对齐：居中；
宽度：继承；
身高：继承；
填充：0 10px；/*如果需要左/右空格，则可选*/
}
.header_col1 a img{
宽度：100%；
垂直对齐：顶部；
}
您可以使用表格显示垂直和水平对齐标记。这种方法是对齐图元的最简单方法。我在你的页面上做了测试，效果很好

.header_col1 {
    float: left;
    width: 20%;
    background: #009240;
    text-align: center;
    position: relative;
    display: table;
}
.header_col1 a {    /* my logo */
    display: table-cell;
    text-align: center
    vertical-align: middle;
}

或者另一种方法是使用填充使元素居中

.header_col1 a {
  padding: 16px 0px;
}

为了避免在更改其他设备中导航的大小和屏幕分辨率时遇到其他麻烦，我推荐第一种解决方案
 刚试过，还是不行。徽标图像保留在绿色容器的顶部。现在可以工作，但与其他答案相同：徽标大小不是固定的，而我需要它随着标题栏宽度的减小而缩小。@drake035的位置与您设置的位置相同。
.header\u col1，.header\u col2{height:70px；}
只需添加
行高：70px线条高度技术工作的唯一方式是固定高度。。。但是，由于您已经使用固定高度定义了
.header\u col1
（然后在媒体查询中进行调整），我不认为这有什么问题。如果固定高度是暂时的，而不是最终解决方案的选项，那么建议的任何其他解决方案也可以解决这个问题，它们只是完全不同的技术（如果您想支持旧浏览器，其中一些技术应该在几年内远离），但徽标大小变得不变，当绿色容器收缩时，我需要徽标收缩。@drake035当容器收缩时，徽标仍应收缩。它在Chrome Inspector中对我很好。如果你想给徽标更多的喘息空间，请添加
填充：.5em到上面的规则集。可以工作，但现在徽标图像大小固定，迫使绿色元素保持足够的大小，而当标题栏总宽度在较小分辨率下减小时，我需要它收缩。可以工作！！Thx马克。由于你显然非常熟练，我想问你一些我经常想问的问题：你不认为CSS作为一个网页布局系统有一些基本的尴尬之处吗？考虑到实现简单到将徽标居中于矩形的难度？@drake035与文字处理或桌面发布应用程序相比，web浏览器是相当原始的布局引擎，考虑到浏览器的约束条件，CSS工作得非常好，也就是说，浏览器必须基于（或多或少）一次浏览内容来设置布局。简言之，我确实同意CSS有时会很尴尬，但与十年前相比，这项技术已经取得了长足的进步。
.header_col1 {
    float: left;
    width: 20%;
    background: #009240;
    text-align: center;
    position: relative;
    display: table;
}
.header_col1 a {    /* my logo */
    display: table-cell;
    text-align: center
    vertical-align: middle;
}

.header_col1 a {
  padding: 16px 0px;
}