Html中心div，但左对齐文本[重复]答案

【问题标题】：Html center div, but align text left [duplicate]Html中心div，但左对齐文本[重复]
【发布时间】：2021-11-22 17:01:20
【问题描述】：

center div

我想要一个宽度为 50% 的 div。然后 div 应该水平居中。 div 中的 Text 应该左对齐，就像在照片中一样。

我的 HTML 正文代码：

<body>
    <div class="navbar">Navbar</div>
    <div class="content">
        <div class="text1">Some Text</div>
        <div class="text2">More text</div>
    </div>
</body>

【问题讨论】：

到目前为止你尝试了什么？

标签： html css

【解决方案1】：

<body>
<header>
    <nav>
        <h1>Nav</h1>
    </nav>
</header>
<main>
    <div>
        <h1>Hi</h1>
        <p>Hi</p>
    </div>
</main>

      body {
            width: 1024px;
            height:  768px;
            margin-left: auto;
            margin-right: auto;
            border: 1px solid black;
       }
       header {
            display: flex;
            align-items: centre;
            padding-top: 20px;
            padding-bottom: 20px;
            justify-content: left;
        }


        nav {
            flex: 2;
            justify-content: left;
            
        }

        div {
            width: 50%;
            min-height: 384px;
            border: 2px solid black;
            text-align: left;
            margin: auto;
            
        }

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

位置：绝对；左：50%；顶部：50%；变换：平移（-50%，-50%）；上面的代码用于使 HTML 元素在其相对父 div 中居中

body {
  background: #333;
  color: #eee;
  position: relative;
  text-align: center;
}

.content {
  width: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: red
}

<body class="body">
  <div class="content">
    <div class="text1">Some Text</div>
    <div class="text2">More text</div>
  </div>
</body>

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。
我已经添加了其他评论