1  

Instead of align-self: center use align-items: center.

而不是align-self: center使用align-items: center。

.logo {
    height: 100px;
    display: flex;
    /* align-self: center; */
    align-items: center; /* new */
    width: 200px;
    background: red;
}

The align-self property applies to flex items. Except your div.logo element is not a flex item because its parent – body, in this case – does not have display: flex or display: inline-flex applied. Therefore, body is not a flex container, the div is not a flex item, and align-self is having no effect.

align-self属性适用于flex项目。除了div.logo元素不是flex项目，因为它的父主体(在本例中)没有display: flex或display: inline-flex应用。因此，body不是flex容器，div不是flex项目，align-self没有任何效果。

The align-items property is similar to align-self, except it applies to flex containers.

aligni -items属性类似于aligni -self，但它适用于flex容器。

However, .logo img has margin: auto set. This is supposed to be enough to vertically and horizontally center the image in the container. With margin: auto on the child, any align-items or justify-content rules on the container should be overridden.

但是，.logo img有边距:自动设置。这应该是足够垂直和水平的中心的图像在容器中。带边距:自动在子对象上，容器上的任何别名项或正当性内容规则都应该被重写。

From the spec:

从规范:

8.1. Aligning with auto margins

8.1。汽车利润看齐

Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.

在通过正当性内容和align-self对齐之前，任何正的自由空间都被分配到该维度的自动边缘。

Note: If free space is distributed to auto margins, the alignment properties will have no effect in that dimension because the margins will have stolen all the free space left over after flexing.

注意:如果自由空间分布到自动边距，对齐属性在该维度中不会有任何影响，因为边距将会窃取所有浮动后剩下的自由空间。

Most browsers adhere to the standard behavior. Edge (and IE10 & 11) are not in compliance.

大多数浏览器都遵循标准行为。Edge(以及IE10和11)不符合要求。