Bootstrap 4整页垂直对齐的div不居中答案

【问题标题】：Bootstrap 4 full page vertically aligned div not centeringBootstrap 4整页垂直对齐的div不居中
【发布时间】：2020-10-11 20:28:39
【问题描述】：

我目前正在使用 Bootstrap 4 来制作我的在线作品集。我现在唯一的问题是我无法垂直对齐 div。我还添加了一个应该流过垂直居中 div 的 .png 图像。图像将整个 div 向下推。我需要使用什么来解决此问题？

这是我正在寻找的结果：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Berk's Online Portfolio</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-black static-top">
  <div class="container">
    <a class="navbar-brand" href="#">
          <img src="https://via.placeholder.com/150x75">
        </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">HOME
                <span class="sr-only">(current)</span>
              </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">ABOUT</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">SKILLS</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">PORTFOLIO</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">CONTACT</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<div class="min-vh-100">
  <div class="row">
    <div class="col-md-12" style="background-color: #F9DB0F;">
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            <h1 class="display-1">HI</h1>
            <h1 class="display-1">I'M BERK</h1>
            <h5>A FULL STACK DEVELOPER AND UI/UX DESIGNER</h5>
          </div>
          <div class="col-md-6">
            <img src="https://entourageapp.s3-us-west-2.amazonaws.com/uploads/images/160/large/manWalkingFrontSuit.png?1440865661" width="75%">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

</body>
</html>

【问题讨论】：

标签： html css bootstrap-4 position vertical-alignment

【解决方案1】：

这可能会有所帮助：

在 style.css 中：


.bg {
  background-color: #F9DB0F;
  margin: 250px 0;
}

.div-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 50px 0;
  
}

.my-pic {
  position: absolute;
  top: -200px
}

在 index.html 中：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Berk's Online Portfolio</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <!-- style should be loaded after the bootstrap files -->
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-black static-top">
        <div class="container">
            <a class="navbar-brand" href="#">
                <img src="https://via.placeholder.com/150x75">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
                aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">HOME
                            <span class="sr-only">(current)</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">ABOUT</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">SKILLS</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">PORTFOLIO</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">CONTACT</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="min-vh-100">
        <div class="row">
            <!-- I added a bg class -->
            <div class="bg col-md-12">
                <div class="container">
                    <div class="row">
                        <!-- I added a div-center class -->
                        <div class="center col-md-6">
                            <h1 class="display-1">HI</h1>
                            <h1 class="display-1">I'M BERK</h1>
                            <h5>A FULL STACK DEVELOPER AND UI/UX DESIGNER</h5>
                        </div>
                        <div class="col-md-6">
                            <!-- I added a my-pic class -->
                            <img class="my-pic"
                                src="https://entourageapp.s3-us-west-2.amazonaws.com/uploads/images/160/large/manWalkingFrontSuit.png?1440865661"
                                width="75%">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

【讨论】：