Search code examples
htmlcsstwitter-bootstrapmedia-queries

how to make div float center of viewport always using CSS

The goal is to have the div (willscape-holder in this case) containing the two images float in the middle of the viewport always. Is there a way to do this without having to do media queries adjusting the margin top and bottom for every type of screen? Thank you for help in advance.

body {
  background: url(../images/willscape-bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* background-position: center top; */
  background-attachment: fixed;
}

.container {
  height: 100vh;
}

.willscape-holder {
  width: 100%;
  max-width: 350px;
  margin: 0 auto;
  padding: 0 20px;
}

#willscape-logo {
  padding: 0 60px;
  width: 100%;
}

#willscape-title {
  width: 100%;
  max-width: 500px;
}
<body>
  <div class="container">
    <div class="willscape-holder">
      <a href="" target="_blank"><img class="img-responsive" id="willscape-logo" src="assets/images/willscape-logo.png" /></a>
      <a href="" target="_blank"><img class="img-responsive" id="willscape-title" src="assets/images/willscape.png" /></a>
    </div>
  </div>
</body>

Solution

  • you may use the display:table/table-cell; properties

    https://www.w3.org/TR/CSS2/tables.html

    17.2 The CSS table model

    The CSS table model is based on the HTML4 table model, in which the structure of a table closely parallels the visual layout of the table. In this model, a table consists of an optional caption and any number of rows of cells. The table model is said to be "row primary" since authors specify rows, not columns, explicitly in the document language. Columns are derived once all the rows have been specified -- the first cell of each row belongs to the first column, the second to the second column, etc.). Rows and columns may be grouped structurally and this grouping reflected in presentation (e.g., a border may be drawn around a group of rows).

    Thus, the table model consists of tables, captions, rows, row groups (including header groups and footer groups), columns, column groups, and cells.

    /* update*/
html {
height:100%;/* equals min-height */
width:100%;
table-layout:fixed ; /*if fixed, then  width is width not min-width */
display:table;
}
body {
display:table-cell;
vertical-align:middle;
/* end update */
  background: url(../images/willscape-bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* background-position: center top; */
  background-attachment: fixed;
}

.container {
 /* height: 100vh;*/
}

.willscape-holder {
  width: 100%;
  max-width: 350px;
  margin: 0 auto;
  padding: 0 20px;
}

#willscape-logo {
  padding: 0 60px;
  width: 100%;
}

#willscape-title {
  width: 100%;
  max-width: 500px;
}
    <body>
  <div class="container">
    <div class="willscape-holder">
      <a href="" target="_blank"><img class="img-responsive" id="willscape-logo" src="assets/images/willscape-logo.png" /></a>
      <a href="" target="_blank"><img class="img-responsive" id="willscape-title" src="assets/images/willscape.png" /></a>
    </div>
  </div>
</body>