Html 左对齐和中心对齐div

我想将图像左对齐，并将div中的文本居中对齐

但我得到了：

文本“未居中”未完全居中

HTML格式如下：

<div id='heading'>
    <div id='heading-inner-container'>
        <img id='logo' src='abc.jpg'/>
        <div id='title'>
            This is not centered
        </div>
    </div>
</div>

---

我怎样才能准确地将文本居中

尝试使用

转换
规则：

CSS

#heading {
    position: relative; // Add this
    box-shadow: rgba(0, 0, 0, 0.075) 0px 0px 4px 0px;
    box-sizing: border-box;             
    display: flex;
    height: 72px;
    width: 100%;                
    align-items: center;
    border-bottom: 1px solid rgb(222, 226, 230);                
    margin: 0px 0px 16px;               
    padding: 16px 24px;
}


#title {
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  white-space: nowrap;
  transform: translate(-50%,-50%);
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1.2;
  font: normal normal 300 normal 36px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

您可以对图像使用
位置：绝对
，并使
文本对齐：居中


#标题{
盒影：rgba（0,0,0,0.075）0px 0px 4px 0px；
框大小：边框框；
显示器：flex；
高度：72px；
宽度：100%；
对齐项目：居中；
边框底部：1px实心rgb（222226230）；
利润率：0px 0px 16px；
填充：16px 24px；
}
#标题内容器{
宽度：90%；
文本对齐：居中；
保证金：0自动；
位置：相对位置；
最小高度：60px；
}
#标志{
浮动：无；
高度：60px；
位置：绝对位置；
左：0；
排名：0；
}           
#头衔{
字体大小：3.5rem；
字体大小：300；
线高：1.2；
字体：普通300普通36px-苹果系统，BlinkMacSystemFont，“Segoe UI”，Roboto，“Helvetica Neue”，Arial，“Noto Sans”，无衬线，“苹果颜色表情符号”，“Segoe UI表情符号”，“Noto颜色表情符号”；
}

这不是居中的
谢谢。但是文本是底部对齐的。有没有办法使文字垂直居中？是的。。。只需添加
top:50%
并编辑转换<代码>转换：翻译（-50%，-50%）。我将编辑我的答案。在
#标题上添加
位置：相对
#heading {
    position: relative; // Add this
    box-shadow: rgba(0, 0, 0, 0.075) 0px 0px 4px 0px;
    box-sizing: border-box;             
    display: flex;
    height: 72px;
    width: 100%;                
    align-items: center;
    border-bottom: 1px solid rgb(222, 226, 230);                
    margin: 0px 0px 16px;               
    padding: 16px 24px;
}


#title {
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  white-space: nowrap;
  transform: translate(-50%,-50%);
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1.2;
  font: normal normal 300 normal 36px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}