V + H Centered Bootstrap Website 'uggggggg!

HTML & CSS
1

Been trying to get my head around this. Works fine in Chrome but breaks in IE and Firefox. What is the best way to center a Bootstrap website both horizontally and vertically?

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title></title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="page-wrap vertical-center">
      <div class="container text-center">
        <div>
          
          <h1>Our website is currently under construction</h1>
        </div>
      </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

    .vertical-center {
  display: flex;
  align-items: center;
  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-)       */
}

.page-wrap {
  padding: 30px 15px;
  background: #fff;
  margin-bottom: 0;
}

h1, h2 {
  font-family: 'Open Sans', sans-serif;
  color: #676767;
}

h2 { font-size: 2em; }

@media (max-width: 480px) {
  h2 {
    font-size: 1em;
  }
}
2

A few things you can try…
You may need webkit-flex added.
There’s also a vertical align middle in flex that may help. Probably better to have height as auto and set a max-width

3

Hi there dpuk44,

here is one possible solution…


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Website coming soon!</title>

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

<style>
html,body {
    display:table;
    width:100%;
    height:100%;
    margin:0;
 }
body {
    display:table-cell;
    vertical-align:middle;
 }
.vertical-center {
    width:80%;
    padding:30px 15px;
    border:1px solid #676767;
    margin:auto;
    text-align:center;
    background:#fff;
 }
h1, h2 {
    font-family:'Open Sans',sans-serif;
    color:#676767;
 }
h2 {
   font-size:2em; }

@media (max-width:480px) {
  h2 {
    font-size:1em;
  }
 }
</style>

</head>
<body>

<div class="vertical-center">
<div class="container text-center">
<div>
<img src="img/snail-logo.gif" class="img-responsive center-block" alt="">
<img src="img/aker-logo.jpg" class="img-responsive center-block" alt="">
<h1>Our website is currently under construction</h1>
<h2>For enquiries, please contact us on <strong>0800 068 4647</strong> or email us at <strong>speedy@move-makers.co.uk</strong></h2>
</div>
</div>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>

</body>
</html>

coothead

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.