求助：用HTML+Twitter Bootstrap实现Instagram风格登录注册页布局问题

嘿，我看你在复刻Instagram风格登录注册页时，卡在了元素水平居中和那个标志性的**"OR"分隔小横条**上，折腾一天确实够闹心的，我来帮你把这俩问题一起解决掉！

先梳理下现有代码里的小问题，再给你修改后的完整代码，保证效果贴近Instagram：

核心问题拆解 #

1. 水平居中失效：你的标题#titre和注册提示#lien都没设置水平对齐，表单元素样式也没贴合Instagram风格；另外你重复使用了id="bloc_page"，ID在HTML里是唯一标识，得改成class。
2. 缺少分隔小横条：Instagram登录页在登录按钮和注册提示之间有个带"OR"文字的分隔线，这个需要用CSS flex布局+伪元素来实现。

修改后的完整代码 #

HTML部分

<body>
  <div class="bloc_page">
    <div id="titre">Gestion TP-TD</div>
    <form>
      <div class="form-group">
        <input class="form-control" placeholder="Numéro de téléphone, @email ou nom utilisateur" type="text">
      </div>
      <div class="form-group">
        <input class="form-control" placeholder="Mot de passe" type="password">
      </div>
      <div class="form-group">
        <button class="btn btn-primary btn-lg btn-block">Sign In</button>
      </div>
      <!-- 添加分隔线区域 -->
      <div class="divider">OR</div>
    </form>
  </div>
  <div class="bloc_page">
    <div id="lien">Vous n'avez pas de compte? <a href="#">S'inscrire</a></div>
  </div>
</body>

CSS部分

/* 全局样式重置，消除默认边距，统一字体 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
  background-color: #fafafa; /* 还原Instagram页面背景色 */
  padding: 20px 0;
}

.bloc_page {
  background-color: white; /* 登录框用白色背景，贴近原版 */
  border: 1px solid #dbdbdb; /* 浅灰色柔和边框 */
  width: 350px; /* 固定宽度比百分比更适配移动端 */
  margin: 0 auto 10px; /* 水平居中+上下间距 */
  padding: 40px 40px 20px;
}

#titre {
  text-align: center; /* 标题水平居中 */
  font-style: italic;
  font-weight: bold;
  font-size: 2.5em;
  margin-bottom: 30px;
}

.form-group {
  margin-bottom: 10px;
}

.form-control {
  width: 100%;
  padding: 10px 8px;
  border: 1px solid #dbdbdb;
  border-radius: 3px;
  background-color: #fafafa;
  font-size: 12px;
}

.btn-primary {
  background-color: #0095f6; /* 还原Instagram蓝色按钮 */
  border: none;
  border-radius: 3px;
  padding: 8px;
  font-weight: 600;
  cursor: pointer;
}

/* 实现"OR"分隔线 */
.divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 15px 0;
  color: #8e8e8e;
  font-size: 13px;
  font-weight: 600;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #dbdbdb;
}

.divider::before {
  margin-right: 10px;
}

.divider::after {
  margin-left: 10px;
}

#lien {
  text-align: center; /* 注册提示文字水平居中 */
  padding: 20px 0;
  font-size: 14px;
}

#lien a {
  color: #0095f6;
  text-decoration: none;
  font-weight: 600;
}

关键改动说明 #

1. 水平居中：给#titre和#lien加上text-align: center;，同时把bloc_page改成固定宽度+margin: 0 auto，确保整个登录框水平居中。
2. 分隔小横条：用flex布局的.divider配合伪元素::before和::after生成左右横线，中间的"OR"文字做了颜色和间距调整，完全复刻Instagram样式。
3. 细节优化：调整了背景色、边框色、字体，让整体风格更贴近Instagram，同时修正了重复ID的问题（把id="bloc_page"改成class="bloc_page"）。

这样调整后，你的页面核心样式就和Instagram登录页一致啦！

内容的提问来源于stack exchange，提问作者K.J Fogang Fokoa