Center div vertically inside container

Question

I'm trying to center a div for my logo vertically inside my navigation header. I've looked into other topics on stackoverflow, but none of them gave me a good solution. Can anybody of you give me a good responsive solution

Looked into : How to vertically center a div for all browsers? and that did not solve my issue.

The goal is to have the div class with logo on the left side vertically centered and the div class with nav on the right side centered vertically.

Snippet:

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 16px;
    font-family: 'Helvetica Neue', Helvetica, Arial, Sans-Serif;
    vertical-align: baseline;
    outline: none;
}

#header {
    background: #00968B;
    height: 58px;
}

.logo {
    height: 58px;
}

<html>
<head>
  <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div id="header">
  <div class="container">
    <div class="logo">
        logo
    </div>
    <div class="nav">
    </div>
  </div>
</div>
</body>
</html>

Possible duplicate of [How to vertically center a div for all browsers?](http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) — Aaron, Aug 15 '16 at 20:56
Looked into those awnsers didn't solve my problem. Didn't center it vertically and wasn't working. @Aaron + Wasn't responsive either. — BPrepper, Aug 15 '16 at 20:57

score 0 · Answer 1 · answered Aug 15 '16 at 21:05

0

Flexbox would allow you to center items vertically align-items: center; and add spacing between the navigation and logo justify-content: space-between;, adding flex-flow: row wrap; will allow the items to wrap once the header items touch.

#header {
  background: #00968B;
  height: 58px;
}
.logo {
  height: 58px;
  background: orange;
}
.nav {
  width: 30%;
  background: yellow;
  height: 30px;
}

.container {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
}

<div id="header">
  <div class="container">
    <div class="logo">
      logo
    </div>
    <div class="nav">
      nav
    </div>
  </div>
</div>

answered Aug 15 '16 at 21:05

Aaron

10,187
3
23
39

That fixes the spacing, but it doesn't align my logo and navigation vertically exactly in the center. – BPrepper Aug 15 '16 at 21:10
If you run the code snippet it does, what other CSS do you have on your site that might be effecting the header items? – Aaron Aug 15 '16 at 21:11
Bootstrap. Forgot about that one. – BPrepper Aug 15 '16 at 21:13

score 0 · Answer 2 · answered Aug 15 '16 at 21:09

Use absolute positioning.

Put the top position 50% (related to container), then you translate back 50% (related to element itself), the last because the 'top 50%' starts at the begin of the element, so you need to return half of it to get what you need.

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 16px;
    font-family: 'Helvetica Neue', Helvetica, Arial, Sans-Serif;
    vertical-align: baseline;
    outline: none;
}

#header {
    background: #00968B;
    height: 58px;
    position: relative;
}

.vcenter {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
 }

.logo {
    left: 10px;
}

.nav {
    right: 10px;
 }

<html>
<head>
  <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div id="header">
  <div class="container">
    <div class="logo vcenter">
        logo
    </div>
    <div class="nav vcenter">
        nav
    </div>
  </div>
</div>
</body>
</html>

Mustapha Larhrouch · Answer 3 · 2016-08-15T21:26:47.313

0

use vertical-align:middle and display: table-cell

.logo {
    height: 58px;  
    vertical-align: middle;
    display: table-cell;
}

.nav{
    vertical-align: middle;
    display: table-cell;
    height: 58px;
    width: 20px;
    position: absolute;
    top: 0px;
    right: 0px;
}

https://jsfiddle.net/b91x5q5h/1/

edited Aug 15 '16 at 21:26

answered Aug 15 '16 at 21:17

Mustapha Larhrouch

3,373
3
14
28

score 0 · Answer 4 · answered Aug 16 '16 at 02:50

Could try:

.logo,
.nav {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Or you could ditch the height on the header and use top/bottom padding, the logo is probably taller than your nav but it should be centered vertically. Then just add some top padding to the nav until its centered vertically.

Center div vertically inside container

4 Answers4