如何将.searchblock DIV居中于header？兼问内容宽度对齐方法

我来帮你搞定这两个问题！先从你最头疼的.searchblock居中说起：

一、让.searchblock在header中居中 #

你之前的尝试没生效，核心原因是你的.header没设置position: relative——当给子元素用position: absolute时，它会相对于最近的已设置非static定位的父元素定位，如果父元素没设置，就会相对于整个文档，所以之前的left值才会看起来完全不对。给你两个实用方案：

方案1：绝对定位+transform（适合需要保留定位的场景） #

修改这两个选择器的CSS：

.header {
  background-color: #4267B2;
  width: 100%;
  height: 42px;
  position: relative; /* 关键：让子元素的absolute相对于header定位 */
}
.searchblock {
  position: absolute;
  left: 50%; /* 先把元素左边缘定位到容器中点 */
  transform: translateX(-50%); /* 再往左偏移自身宽度的50%，实现真正水平居中 */
  height: 24px; /* 可以加个高度，方便你看到效果 */
  background: #fff; /* 临时加背景色，测试时更容易观察 */
}

方案2：Flex布局（更简洁，推荐） #

如果不需要用绝对定位，直接给.header启用flex布局，一键实现居中：

.header {
  background-color: #4267B2;
  width: 100%;
  height: 42px;
  display: flex;
  justify-content: center; /* 让所有子元素水平居中 */
  align-items: center; /* 可选：让子元素垂直居中，适配header高度 */
}
/* 这里.searchblock不需要设置任何定位属性，直接就能居中 */
.searchblock {
  height: 24px;
  background: #fff;
}

二、快速实现header与body内容宽度对齐 #

最简便的方法是给header内部和body的主内容容器设置统一的最大宽度，再配合margin: 0 auto实现居中对齐，这样大屏幕下内容不会过于拉伸，小屏幕自动铺满宽度：

步骤1：修改CSS #

.header {
  background-color: #4267B2;
  width: 100%;
  height: 42px;
}
/* 给header内部加一个容器，用来限制内容宽度 */
.header-inner {
  max-width: 1200px; /* 你可以根据需求调整这个值，比如1000px */
  width: 100%;
  margin: 0 auto;
  height: 100%;
  /* 如果用方案2的flex布局，这里可以加上display:flex等属性 */
}
/* 给body的主内容容器也加同样的样式 */
.main-content {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 20px 0; /* 可选：加内边距让内容不贴边 */
}

步骤2：调整HTML结构 #

把header里的所有内容放到.header-inner容器中，同时给body内容加上.main-content容器：

<div class="header">
  <div class="header-inner">
    <div class="searchblock"></div>
    <img id="logo" src="facebook.png" height="24" width="24">
    <input id="search" type="text" name="search" value="search">
    <input type="image" name="submit" src="maglass.png">
    <img id="profile" src="blacwhit.jpg" height="24" width="24">
    <ul>
      <li>Create</li>
      <li>Find Friends</li>
      <li>Home</li>
      <li>Anthony</li>
    </ul>
    <div class="bttn">
      <button type="button"><img src="messages.png"height="24" width="24"></button>
      <button type="button"><img src="frequest.png"height="24" width="24"></button>
      <button type="button"><img src="alerts.png"height="24" width="24"></button>
      <button type="button"><img src="acct.png"height="24" width="24"></button>
      <button type="button"><img src="help.png"height="24" width="24"></button>
      <button type="button"><img src="dropdown.png"height="24" width="24"></button>
    </div>
  </div>
</div>

<!-- 页面主体内容 -->
<div class="main-content">
  <!-- 你的body内容写在这里 -->
</div>

这样不管屏幕尺寸怎么变，header内部的内容和body的主内容都会完美对齐啦！

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