CSS实现Div水平对齐及窗口自适应问题咨询

用CSS Flexbox替换你原来的float布局，这是实现响应式水平排列最简洁的方案，修改后能完美适配窗口缩放。

关键修改说明 #

• 移除全局样式里的position: relative，全局设置该属性会干扰正常布局
• 将main的display: inline-block改为display: flex，搭配justify-content: space-around（让区块均匀分布）、align-items: center（垂直居中）、flex-wrap: wrap（窗口变小时自动换行）
• 删除.skills和.ocp里的float、left/right定位，给它们设置flex: 1让两个文本区块自动平分剩余空间，同时加max-width避免内容过宽
• 调整图片样式，限制最大宽度防止溢出
• 给.side类添加内边距优化内容显示，移除top: 15%的定位

修改后的完整CSS代码 #

* {
  margin: 0;
  list-style-type: none;
  text-align: center;
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
  height: auto;
  width: auto;
}

a {
  text-decoration: none;
}

body {
  background-image: url("./images/Pattern Background.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  min-height: 100vh;
  padding-bottom: 50px;
}

body::before {
  background-color: #8d9365F8;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: -1;
}

/* Navigation */
nav {
  text-align: center;
  background-color: rgb(215, 213, 213);
  padding: 50px;
  margin: 0;
  box-shadow: 0 0 20px 0 gray;
}

nav a {
  color: black;
  font-size: 16px;
  font-weight: bold;
  border: .5px solid black;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 5px 10px 1px gray;
  background: linear-gradient(#d9b29c, #b79785);
}

nav .button {
  display: inline;
  padding: 40px;
  box-shadow: 0px 2% 2% rgba(0, 0, 0, 0.2), 0px -2% 2% rgba(255, 255, 255, 0.5) inset, 0 2% 2% rgba(255, 255, 255, 0.8) inset;
  text-shadow: 0 -2px #c4a18d;
}

nav a:hover {
  box-shadow: 0px 2% 2% rgba(0, 0, 0, 0.1), 0px -2% 2% rgba(255, 255, 255, 0.25) inset, 0 2% 2% rgba(255, 255, 255, 0.4) inset;
  background: #c0a08d;
}

nav .button:active {
  margin-top: 2px;
  margin-bottom: -2px;
  box-shadow: 0px 2% 2% rgba(63, 63, 63, 0.1), 0px -2% 2% rgba(255, 255, 255, 0.25) inset, 0 2% 2% rgba(255, 255, 255, 0.4) inset;
}

.banner {
  margin: 30px;
}

/* Content */
main {
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

h1 {
  color: whitesmoke;
  font-size: 55px;
  font-family: 'Playfair Display', serif;
}

.skills li {
  text-align: left;
  margin-left: 20%;
}

.photo img {
  max-width: 250px;
  height: auto;
  margin: 20px 0;
}

.skills {
  color: whitesmoke;
  flex: 1;
  max-width: 300px;
}

.ocp {
  color: whitesmoke;
  flex: 1;
  max-width: 400px;
}

.side {
  background-color: #d9b29c;
  padding: 20px;
  border-radius: 8px;
}

HTML代码（无需修改，直接沿用即可） #

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&family=Playfair+Display&display=swap" rel="stylesheet">

<nav>
  <ul>
    <li class="button">
      <a href="#">Home</a>
    </li>
    <li class="button">
      <a href="#">Extra #1</a>
    </li>
    <li class="button">
      <a href="#">Extra #2</a>
    </li>
    <li class="button">
      <a href="#">About Me</a>
    </li>
  </ul>
</nav>
<div class="banner">
  <h1>Merima Kulosman</h1>
</div>
<div class="content">
  <main>
    <div class="skills side">
      <h3>Skills:</h3>
      <ul>
        <li><span></span>Communication</li>
        <li><span></span>Problem Solving</li>
        <li><span></span>Writing</li>
      </ul>
    </div>
    <div class="photo">
      <img src="./style/images/Merima.png">
    </div>
    <div class="ocp side">
      <h3>Occupational Therapist</h3>
      <p>Welcome to my portfolio! As an experienced occupational therapist, I am committed to providing exceptional care that empowers individuals to achieve their goals. Through my personalized approach to therapy and expertise in various therapeutic techniques, I have been able to facilitate remarkable progress and life-changing outcomes for my clients. My dedication to excellence and client-centered philosophy make me a valuable asset to any organization seeking a compassionate and skilled occupational therapist. Please feel free to explore my portfolio to learn more about my expertise and how I can contribute to your team.</p>
    </div>
  </main>
</div>

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