实现图片垂直水平居中及移动端图片居上的响应式布局方案

Hey Dave, I see you've been struggling with getting that image centered properly in its column and making it behave smoothly on mobile—let's sort this out with a clean, Bootstrap-friendly approach.

First, Fix the Class Name Conflict #

You’ve got both the wrapping <div> and the <img> using the box-image class, which can cause unexpected styling overlap. Let’s rename the container div to image-container to keep things clear and avoid confusion.

Step 1: Desktop Layout - Perfect Vertical & Horizontal Centering #

Since you’re using Bootstrap, we can leverage flexbox (which Bootstrap 4+ uses under the hood) to center the image flawlessly in its column. We’ll turn the image container into a flex container, which lets us align content both vertically and horizontally with minimal code.

Step 2: Mobile Layout - Stacked & Centered #

Bootstrap’s col-md-6 will automatically stack the columns on screens smaller than 768px, so the image will sit above the text by default. We just need to ensure the image stays centered and scales properly on mobile.

Full Working Code #

HTML

<section id="what">
  <div class="row">
    <div class="col-md-6 image-container">
      <img class="box-image" src="http://chalkgallerylewes.co.uk/wp-content/uploads/2013/08/Placeholder-500x500px.png">
    </div>
    <div class="col-md-6">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      <ul>
        <li>Placeholder list </li>
        <li>Placeholder list </li>
        <li>Placeholder list </li>
        <li>Placeholder list </li>
        <li>Placeholder list </li>
      </ul>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </div>
  </div>
</section>

CSS

/* Desktop centering logic */
.image-container {
  display: flex;
  align-items: center; /* Vertically centers the image */
  justify-content: center; /* Horizontally centers the image */
  min-height: 100%; /* Ensures the container matches the height of the text column */
}

/* Mobile-friendly image styling */
.box-image {
  max-width: 100%; /* Prevents image from overflowing small screens */
  height: auto; /* Maintains the image's aspect ratio */
  margin: 0 auto; /* Centers the image on mobile */
}

/* Optional: Add spacing between image and text on mobile */
@media (max-width: 767px) {
  .image-container {
    margin-bottom: 2rem;
  }
}

Bonus Bootstrap-Native Shortcut (Bootstrap 5+) #

If you’re using Bootstrap 5, you can skip the custom .image-container CSS entirely by using built-in utility classes:

<div class="col-md-6 d-flex align-items-center justify-content-center">

This replaces the custom flex styling with Bootstrap’s native classes, keeping your code even more consistent with the framework.

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