Bootstrap学习疑问：如何实现div内内容居中对齐？

你要的效果用Bootstrap自带的工具类就能实现，不用自己写复杂CSS：

1. 让左侧公司信息水平居中 #

给承载公司信息的company-1容器加上text-center类，就能让里面的文字、图片都水平居中；如果想让整个col-md-3列的内容都居中，也可以给col-md-3加上d-flex justify-content-center：

修改后的代码：

<div class="col-md-3">
  <!-- Company Information Column -->
  <div class="company-1 text-center">
    <h3>Graphic Coordinator</h3>
    <p>ABC</p>
    <img src="#" alt="company logo">
    <p>2020-2023</p>
  </div>
</div>

2. 可选：让左右两栏内容垂直对齐 #

如果希望左侧的公司信息和右侧的职位描述垂直居中对齐，只需要给外层的row加上align-items-center类：

<div class="row align-items-center">
  <!-- 左右列代码 -->
</div>

关于你之前的CSS无效问题 #

你自己写的display:flex等属性没生效，大概率是因为Bootstrap的内置类优先级比你自定义的CSS高，或者你没有正确定位到目标元素。用Bootstrap原生工具类既能避免这类冲突，也更符合框架的使用逻辑。

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