如何使用css垂直居中我div的所有孩子？

Question

这是我的代码

.header {
        width: 100%;
        height: 100px;
        background: black;
    }
    
    .header .headerContainer {
        position: relative;
    	top: 50%;
        transform: translateY(-50%);
        height: inherit;
    }
    
    img#logo {
        height: 75%;    
    }
    
    p#logotext {
        color: white;
        display: inline
    }

<div class="header">
    <div class="headerContainer">
        <img src="https://cdn.worldvectorlogo.com/logos/react.svg" alt="Logo" id="logo" />
        <p id="logotext">Welcome To Here</p>
    </div>
</div>

但是，这并没有正确对齐元素。

我应该如何修改我的CSS以使headerContainer正确对齐？

Answer 1

您可以使用flexbox解决此问题：

.header {
  background: black;
  height: 100px;
  width: 100%;
}
.header .headerContainer {
  align-items: center;
  display: flex;
  height: inherit;
}
img#logo {
  height: 75%;    
}
p#logotext {
  color: white;
  display: inline
}

<div class="header">
    <div class="headerContainer">
        <img src="https://placehold.it/50x50" alt="Logo" id="logo" />
        <p id="logotext">Welcome To Here</p>
    </div>
</div>

因此，您无需使用position或tranform来垂直居中项目。如果您想了解有关flexbox的更多信息，我建议您this site进行快速概述/参考。

Answer 2

使用此代码

<style>
.class{
Position:absolute;
top:50%;
left:50%;
transform:rotateX(-50%,50%);
}
</style>

Answer 3

您也可以使用CSS Grid。

.header {
  background: black;
  height: 100%
  width: 100%;
  padding: 20px;
}
.header .headerContainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
img#logo {
  width: auto;
  height: auto;
  align-self: center;
}

p#logotext {
  color: white;
  align-self: center;
}

<div class="header">
    <div class="headerContainer">
        <img src="http://via.placeholder.com/350x150" alt="Logo" id="logo" />
        <p id="logotext">Welcome To Here</p>
    </div>
</div>

Answer 4

如此接近....你只需要显示：flex;进入headerContainer

.header {
  background: black;
  height: 100px;
  width: 100%;
}
.header .headerContainer {
  align-items: center;
  display: flex;
  height: inherit;
}
img#logo {
  height: 75%;    
}
p#logotext {
  color: white;
  display: inline
}