Vertically Center Items with Flexbox

Vertically center list item content with Flexbox?

Yes flexbox is great for this. You can use the existing layout and just use inline-flex on the li and set align-items: center to vertically center the content.

ul{background:wheat;height:200px;text-align:center;}li{height:200px;display:inline-flex;margin-right:10px;background:green;color:white;align-items:center;}

<ul>  <li>Item 1</li>  <li>Item 2</li>  <li>Item 3</li>  <li>Item 4</li>  <li>Item 5</li></ul>

Vertical center when using flex

Simply add .thing { display: flex; flex-direction: column; justif-content: center; } to the CSS. flex-direction: column; will make sure that the normal block-level element behavior is maintained. justify-content: center; aligns the items at the cenetr of the main-axis (in this case the vertical axis).

.container {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-wrap: wrap;
}

.thing {
  background: red;
  color: white;
  margin: 5px;
  text-align: center;
  flex: 1 0 30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

<div class="container">
  <div class="thing">
    text
  </div>
  <div class="thing">
    text
  </div>
  <div class="thing">
    text
  </div>
  <div class="thing">
    text
  </div>
</div>

Vertical Align when using flex

You can use align-items to vertically align flex items along the Cross Axis in a row layout.

Specifically, align-items: center so the flex items margin boxes are centered within the line on the cross-axis. Have a look at the updated CodeSandbox Demo

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

<div class="container">
  <h4>Workbench</h4>
  <span>☰</span>
</div>

How to vertically center text inside flex element

To center the flex items along the main axis (in your case column/vertically), add justify-content: center; to the container (and erase the flex settings from the children):

#elem1 {  height: 180px;  border: 1px solid #ddd;  display: flex;  flex-direction: column;  justify-content: center;}
.inner_element {  text-align: center;}

<div id="elem1">  <div class="inner_element">aaaa</div>  <div class="inner_element">bbbb</div></div>

center two child elements vertically in flexbox

You can make those boxes display: flex; align-items: center; justify-content: center; to center the contents vertically and horizontally.

body {    background: #2F546B;    margin: 0;    font-family: 'Roboto', sans-serif;}
#current {    display: -webkit-box;    display: -ms-flexbox;    display: flex;    -ms-flex-wrap: wrap;        flex-wrap: wrap;}
.current_details {    display: -webkit-box;    display: -ms-flexbox;    display: flex;    -webkit-box-orient: vertical;    -webkit-box-direction: normal;        -ms-flex-direction: column;            flex-direction: column;    width: 200px;    height: 300px;    margin: 5px 5px;    text-align: center;    border: 2px solid red;}
.current_details div {    font-size: 2em;    border: 2px solid #fdfefe;    display: flex;    align-items: center;    justify-content: center;}
.current_details div:nth-child(1) {    -webkit-box-flex: 1;        -ms-flex: 1;            flex: 1;}
.current_details div:nth-child(2) {    color: #000;    background: #fdfefe;    -webkit-box-flex: 2;        -ms-flex: 2;            flex: 2;}

<div id="current">    <a ng-repeat="(key, value) in vm.currentQuotes" ng-href="#!/current/{{key}}">        <div class="current_details">            <div>AUD</div>            <div>1.5045</div>        </div>    </a></div>

Flexbox: vertically centering text in its box

Add this to your CSS code:

.series-switcher {
 display: flex;
}

Or in your case add display: flex; to your .flextabs a.series-switcher class in CSS will work too.

/* basic setup to simulate my environment */#sidebar { width: 320px; padding: 0 30px; background-color: #eaeaea; }.widget { clear:both; padding: 10px 0; }ul { list-style: none; margin: 0; padding: 0;}a { text-decoration: none; color: #666; }a:hover { color: #000; }
/* list method */#series-switcher-ul li {  display: inline-block;  margin: 0;  padding: 0;  vertical-align: middle; /* nope */}li a.series-switcher {  display: block;  background-color: #ccc;  border: 1px solid #999;  border-radius: 8px 8px 0 0;  padding: 0 15px;  line-height: 0.8em;  text-align: center;  height: 2.5em;  vertical-align: middle; /* nope */}li a.series-switcher.active {  background-color: unset;  color: #000;  border-bottom-width: 0;  }
/* flexbox method */.flextabs {  display: flex;  width: 100%;  flex-wrap: wrap;  align-items: center; /* nope */  justify-content: center; /* nope */  align-content: center; /* nope */  vertical-align: middle; /* nope */}.flextabs a.series-switcher {  flex: auto;  background-color: #ccc;  border: 1px solid #999;  border-radius: 8px 8px 0 0;  height: 2.5em;  padding: 0 15px;  line-height: 0.8em;  text-align: center;  align-items: center; /* nope */  justify-content: center; /* nope */  align-content: center; /* nope */  vertical-align: middle; /* nope */}.flextabs a.series-switcher.active {  background-color: unset;  color: #000;  border-bottom-width: 0;}
.series-switcher { display: flex;}

<div id="sidebar">  <div class="widget">    <ul id="series-switcher-ul">     <li><a href="#" class="series-switcher series-nt active">New<br>Testament</a></li><li><a href="#" class="series-switcher series-ot">Old<br>Testament</a></li><li><a href="#" class="series-switcher series-topics">Topics</a></li>    </ul>  </div>
  <div class="widget">    <div class="flextabs">     <a href="#" class="series-switcher series-nt active">New<br>Testament</a>      <a href="#" class="series-switcher series-ot">Old<br>Testament</a>     <a href="#" class="series-switcher series-topics">Topics</a>    </div>  </div></div>

Flexbox vertically align items to the center of navbar

By default, the height of the flex container #nav-container .container is auto, in the other words the height of the containing content, so align-items takes no effects visually.

You can set it to #nav-container .container { height: 100%; } or height: inherit;, since the parent #nav-container has fixed height.

#nav-container {  width: 100%;  height: 50px;  overflow: hidden;  background: #3498db;  top: 0;  left: 0;  position: fixed;  z-index: 999;}#nav-container .container {  max-width: 800px;  position: relative;  padding: 0 30px;  display: flex;  flex-direction: row;  flex-wrap: wrap;  align-items: center;  height: 100%; /*added*/}.top-nav-logo {  max-height: 35px;  float: left;}ul.navmenu {  margin: 0 0 0 50px;  padding: 0;  float: left;}ul.navmenu li {  padding-right: 25px;  display: inline;}

<header id="nav-container">
  <div class="container">
    <img src="http://coneyislandpark.com/imgUploader/logos/Pepsi_logo_2008.png" alt="My Site" class="top-nav-logo" />
    <ul class="navmenu">      <li>Home</li>      <li>About</li>      <li>Contact</li>    </ul>
  </div>
</header>