如何实现宽度为50%的div水平居中且内部文本左对齐

实现方案 #

要实现宽度50%的div水平居中、内部文本左对齐的效果，有两种常用且成熟的实现方式： #

方案1：margin自动居中（兼容性最优，推荐优先使用）

直接给.content元素添加如下CSS规则即可，不需要修改其他元素的样式：

.content {
  width: 50%;
  /* 水平居中核心逻辑：左右外边距自动平分剩余空间 */
  margin: 0 auto;
  /* 若全局样式有设置text-align统一居中，添加下面这句覆盖即可保证内部文本左对齐 */
  text-align: left;
}

方案2：Flex布局（适合页面整体使用Flex管控布局的场景）

给父级body元素添加Flex布局规则，同时适配对应元素样式：

body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 如果需要顶部navbar保持通栏占满屏幕宽度，添加如下规则 */
.navbar {
  width: 100%;
}
.content {
  width: 50%;
  text-align: left;
}

内容的提问来源于stack exchange，提问作者LoGRiTEY