CSS元素定位咨询：左侧文本右侧图片+容器居中实现方案

一、容器居中的稳妥实现方式 #

你之前用position: absolute + transform的居中方法虽然能生效，但会让容器脱离文档流，可能干扰页面其他元素布局。推荐两种更符合正常文档流的方案：

方案1：Flex布局实现垂直水平居中（推荐） #

给页面body设置flex属性，让容器自动居中：

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

方案2：Margin实现水平居中 #

给容器设置固定宽度，用margin: 0 auto实现水平居中，垂直方向可通过padding调整：

body {
  margin: 0;
  padding: 50px 0;
}

.container {
  width: 80%;
  margin: 0 auto;
}

二、文本+浮动图片的正确结构与样式 #

要实现左侧文本、右侧图片的布局，核心注意3点：

1. 浮动图片必须放在文本内容之前
2. 给图片设置固定宽度，避免撑爆容器
3. 给图片添加左外边距，和文本拉开间距；给容器加overflow: hidden清除浮动，防止高度塌陷

修改后的完整代码 #

HTML

<div class="container">
  <img src="/image.jpg" alt="右侧展示图片">
  <div class="text-content">
    <h1>Heading 1</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At dolore sed quisquam cumque laudantium animi qui culpa? Pariatur rerum tempora similique deleniti, eius perferendis, officia culpa vel aut dolorem porro.</p>
    <h2>Heading 2</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum eligendi sed, laboriosam a doloribus dolor. Et enim rerum mollitia tenetur ducimus magnam assumenda repudiandae fugiat aut laboriosam. Excepturi, quaerat sequi!</p>
  </div>
</div>

CSS

/* 用Flex实现容器居中 */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  background-color: aqua;
  border: 1px black solid;
  width: 80%;
  padding: 20px;
  overflow: hidden; /* 清除浮动，避免容器高度塌陷 */
}

img {
  float: right;
  width: 30%; /* 可根据需求调整图片宽度 */
  margin-left: 20px; /* 图片与文本的间距 */
}

.text-content {
  /* 可选：若需要文本占满剩余宽度，可添加 overflow: auto; */
}

关键说明 #

• 用text-content包裹文本：让结构更清晰，后续调整样式更方便
• overflow: hidden：解决浮动元素导致容器高度不生效的问题
• 图片宽度设置：避免图片过大挤压文本空间，保证布局稳定

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