html - 无法将面板 div 居中

Question

所以我试图让红色 div(面板)在页面底部的 div 的黑色背景中居中，同时在其中放置字体很棒的 Logo ，并使整个红色 div 成为一个按钮，而不是只是图标。我已经搜索了答案但找不到，非常感谢任何帮助。

body {
  width: 100%;
  padding: 0;
  margin: 0;
}

body,
html {
  background: fixed;
  background-image: url("../img/pineapple-1704339_1920");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: grey;
  height: 95.8vh;
}

.text-box {
  text-align: center;
}

.panel {
  text-align: center;
  padding: 7vh;
  border-radius: 20px 20px 20px;
  background-color: red;
  height: calc(100% - 80px);
}


/*==============================================================================evrythang==*/

.hero {
  height: 75%;
  width: 100%;
}

.hero-title {
  text-align: center;
  margin-top: 0;
  padding-top: 10%;
  color: white;
}


/*==============================================================================hero section==*/

.external-sites {
  height: 25%;
  width: 100%;
  background-color: black;
}


/*==============================================================================external sites==*/

.work-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.sites {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="footer">
  <div class="container-fluid external-sites">
    <div class="row">
      <div class="col-md-4">
        <div class="panel">
          <a href="#" target="_blank"><i class="fa fa-linkedin fa-5x" style="color:blue"></i></a>
        </div>
      </div>
      <div class="col-md-4">
        <div class="panel">
          <i aria-hidden="true" class="fa fa-html5 fa-5x fa-center"></i>
        </div>
      </div>
      <div class="col-md-4">
        <div class="panel">
          <a href="#" target="_blank"><i class="fa fa-github-square fa-5x" style="color:green"></i></a>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

如果我知道您想要做什么，这里有一段代码可以满足您的需求。看起来您没有将中间面板配置为链接，所以我没有这样做，而是移动了 anchor 标记以包含您的 .panel div。还调整了 CSS 以使您的面板 div 设置更具体，以便使用背景颜色的设置。并包含字体超棒的 CSS 链接。

body {
  width: 100%;
  padding: 0;
  margin: 0;
}

body,
html {
  background: fixed;
  background-image: url("../img/pineapple-1704339_1920");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: grey;
  height: 95.8vh;
}

.text-box {
  text-align: center;
}

div.col-md-4 .panel {
  text-align: center;
  padding: 7vh;
  border-radius: 20px 20px 20px;
  background-color: red;
  height: calc(100% - 80px);
}

.hero {
  height: 75%;
  width: 100%;
}

.hero-title {
  text-align: center;
  margin-top: 0;
  padding-top: 10%;
  color: white;
}

.external-sites {
  height: 25%;
  width: 100%;
  background-color: black;
}

.work-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.sites {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<div class="footer">
  <div class="container-fluid external-sites">
    <div class="row">
      <div class="col-md-4">
      <a href="#" target="_blank">
        <div class="panel">
          <i class="fa fa-linkedin fa-5x" style="color:blue"></i>
        </div>
        </a>
      </div>
      <div class="col-md-4">
        <div class="panel">
          <i aria-hidden="true" class="fa fa-html5 fa-5x fa-center"></i>
        </div>
      </div>
      <div class="col-md-4">
        <a href="#" target="_blank">
          <div class="panel">
            <i class="fa fa-github-square fa-5x" style="color:green"></i>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>