在html中居中文本，同时保持左对齐？

Question

我浏览了很多关于这个主题的帖子，但传统的解决方案似乎不起作用。我很可能做错了什么，但我看不出是什么。我试图将文本置于 div 中，同时保持左对齐。这是我的代码/标记：

HTML

<div class="home">
    <div class="title">
        Hi, I'm <a href="#">name</a>.  This is some of my <a href="#">work</a>.
    </div>
</div>

CSS

.home {
    padding: 120px 75px 0px 75px;
    margin: 0 0 200px 0;
    width: calc(100% - 150px);
    height: auto;
    text-align: center;
}
   .title {
   display: inline-block;
   text-align: left;
   color: var(--text-primary);
}

目前我已经设置好了，所以标题 div 中的文本左对齐，标题 div 在主 div 中居中（至少我认为这是正在发生的事情。）我也尝试过弹性框，但无济于事。我认为这个问题与 h1 标签中的文本换行有关，在右侧留下空间（在下面以红色选择）。这就是我的意思：

感谢您的关注，感谢您的任何建议！

Answer 1

我设法通过“收缩包装”标题 div 到里面的文本，使文本在其中居中，然后将主 div 用作标题 div 的弹性框居中。

.home {
    padding: 5% 0;
    margin-top: 10%;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5.5rem;
    font-weight: 800;
    color: var(--text-primary);
}

.title {
    width: max-content;
}

希望这可以帮助其他遇到此问题的人！

Answer 2

尝试给 "home" width:100% 和 "title" margin-left:auto;边距右：自动

Answer 3

.title {
    display: inline-block;
    text-align: center;
    color: var(--text-primary);
    float:left;
}

Answer 4

当我想把任何东西居中时，我通常会尝试这个，所以我希望它对你有用。

.home{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Answer 5

我想你需要这个。

.home {
    padding: 50px 0;
    margin: 0 0 200px 0;
    width: calc(100% - 150px);
    height: auto;
    display: flex;
    justify-content: center;
    background:red;
}
.title {
   display: inline-block;
   color: var(--text-primary);
   background: yellow;
   width: calc(100% - 100px);
   text-align: center;
}

<div class="home">
    <div class="title">
        Hi, I'm <a href="#">name</a>.  This is some of my <a href="#">work</a>.
    </div>
</div>