无法将面板div居中

Question

so i'm trying to make the red div (panel) center within the black background of the div at the bottom of the page, while haveing the font awesome logo in them and make the whole red div a button, rather than just the icon. I have searched for an answer but can not find, any help is greatly appreciated.

 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

If I get your idea about what you want to do - here is a snippet of code that does what I think you want. It looks like you didn't have the middle panel configured as a link, so I didn't do that, but moved the anchor tag to enclose your .panel div. Also tweaked the CSS to make your panel div settings more specific so that the settings for background-color would be used. And included the font-awesome CSS link.

 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> 

Answer 2

I think you are trying to make red panel vertically center along with font awesome icons, so try this css

.panel {
    text-align: center;
    padding: 7vh;
    border-radius: 20px 20px 20px;
    background-color: red;
     height: calc(100% - 80px);
    margin: 5vh;
}
.panel a {
    display: block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

<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">
          <a href="#" target="_blank"><i aria-hidden="true" class="fa fa-html5 fa-5x fa-center"></i></a>
        </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>