Vue.js页面内容无法全局居中，混合Bootstrap样式如何解决？

• 根容器未占满视口：你当前的.container仅自适应内容高度，没有铺满整个浏览器窗口，没有全屏布局的基础
• 样式冲突：你自定义的.container和Bootstrap自带的.container类重名，Bootstrap的.container默认带有固定宽度、左右margin的样式，直接覆盖了你写的部分自定义样式，是混用样式出问题的核心原因
• 浮动布局异常：头部的logo和导航用了float:left/float:right，浮动会导致父元素高度塌陷，干扰后续元素的对齐逻辑
• 样式冗余错误：比如.postages同时写了两次flex-direction，最后只有后面的row生效，和你想要的列布局逻辑冲突

1. 模板部分修改 #

将最外层容器的类名改成非Bootstrap占用的名称，同时给头部加一层容器包裹：

<template>
  <!-- 把原来的container改成fullscreen-container，避免和Bootstrap冲突 -->
  <div class="fullscreen-container">
    <!-- 新增头部容器包裹左右模块 -->
    <div class="header-wrapper">
      <div class="left">
        <img src="../assets/GeeksBay-4.jpg" alt="logo" />
      </div>
      <div class="right">
        <nav>
          <li><a href="#">Login</a></li>
          <li><a href="#">Sign Up</a></li>
        </nav>
      </div>
    </div>
    <div>
      <h1>GeekCentric</h1>
    </div>
    <div class="post-detail">        
      <form class="submit" @submit.prevent="submit">
        <input class="post" placeholder="Type your favourite topic..." v-model="message"/>
      </form>
    </div>
    <div class="postages list-group list-group-flush border-bottom scrollarea">
      <div class="list-group-item list-group-item-action py-3 lh-tight"
           v-for="message in messages" :key="message"
      >
        <div class="post-details col-10 mb-1 small">{{ message.message }}</div>
      </div>
    </div>
  </div>
</template>

2. 样式部分修改 #

替换原来的.container相关样式，删除冗余错误属性，用flex实现全屏居中：

<style scoped>
/* 全局生效的视口高度重置，如果你的项目有全局样式可以写在全局里 */
:global(html, body) {
  margin: 0;
  padding: 0;
  height: 100%;
}
.fullscreen-container {
  background-color: #330624;
  padding: 10px;
  box-sizing: border-box;
  /* 占满整个视口高度 */
  min-height: 100vh;
  /* 弹性布局，子元素纵向排列 */
  display: flex;
  flex-direction: column;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中，如果希望内容贴顶部就去掉这个属性 */
  justify-content: center;
}
/* 头部样式，替换原来的float布局 */
.header-wrapper {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 25px;
}
.left, .right {
  /* 去掉原来的float属性 */
  float: none;
}
h1 {
  color: #fdb924;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.submit {
  margin-top: 45px;
  width: 100%;
}
.post-detail {
  margin: 1px;
  width: 100%;
  max-width: 600px; /* 可以自己调整输入框的最大宽度 */
}
.post-details {
  background-color: #330624;
  padding: 10px;
  box-sizing: border-box;
  color: #fff;
  font-size: 18px;
  border-bottom: 3px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.postages {
  padding: 50px;
  box-sizing: border-box;  
  color: rgb(88, 88, 88);
  margin: 0 10px;
  border-bottom: 3px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 删掉重复的flex-direction，保留需要的即可，这里如果是列表要纵向排列就用column */
  flex-direction: column;
  width: 100%;
  max-width: 800px; /* 可以自己调整消息列表的最大宽度 */
}
.scrollarea {
  min-height: 808px;
  margin: auto;
}
</style>

如果希望内容整体垂直居中，保留justify-content: center即可；如果希望头部贴顶，内容跟着自然排布，删掉这个属性就可以。后续自定义样式尽量不要和Bootstrap的内置类名重名，就能避免大部分样式冲突问题。

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