css - Flexbox align-self is not working in my layout -

im trying center #view-ctrls-cntnr horizontally inside of .menubar. when use align-self: center doesnt appear anything. doing wrong, there better approach? jsfiddle.

html

<script src="https://code.jquery.com/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="https://code.jquery.com/jquery-2.1.4.js"></script> <script src="https://code.jquery.com/jquery-1.11.3.js"></script> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>  <section class="analysis">   <div class="menubar">      <div class="dropdown" id="file-btn">       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">dropdown <span class="caret"></span></a>       <ul class="dropdown-menu">         <li><a href="#">action</a></li>         <li><a href="#">another action</a></li>         <li><a href="#">something else here</a></li>         <li role="separator" class="divider"></li>         <li><a href="#">separated link</a></li>         <li role="separator" class="divider"></li>         <li><a href="#">one more separated link</a></li>       </ul>     </div>      <div id="view-ctrls-cntnr">       <div class="btn-group" role="group">         <button class="btn btn-default" ng-class="{'active-view': active_views[0]}" ng-click="toggleview(0)">r-theta</button>         <button class="btn btn-default" ng-class="{'active-view': active_views[1]}" ng-click="toggleview(1)">cartesian</button>         <button class="btn btn-default" ng-class="{'active-view': active_views[2]}" ng-click="toggleview(2)">longitudinal</button>         <button class="btn btn-default" ng-class="{'active-view': active_views[3]}" ng-click="">console</button>       </div>     </div>   </div>   <div id="views-cntnr">     <div id="r1" class="view-row">       <div id="v1" class="view">v1</div>       <div id="v2" class="view">v2</div>       <div id="v3" class="view">v3</div>     </div>     <div id="r2" class="view-row">       <div id="v4" class="view">v4</div>     </div>   </div>   <div id="frame-ctrl-cntnr">     <div id="frame-num" class="frame-ctrl"># x</div>     <div id="frame-range-cntnr" class="frame-ctrl">       <input type="range">     </div>   </div> </section> 

css

html, body {   height: 100%; }  .analysis {   display: flex;   flex-direction: column;   height: 100%; }   /* menubar */  .menubar {   padding: 4px 0 4px;   background-color: #eee;   border: hsl(0, 0%, 75%) solid 1px;   border-right: none;   border-left: none;   display: flex; }  #view-ctrls-cntnr {   align-self: center; }  #file-btn {   color: black;   text-decoration:none }  /* menubar */   /* views */  #views-cntnr {   display: flex;   flex-direction: column;   flex-grow: 1; }   /* rows */   /* row 1 */  #r1 {   display: flex;   flex-grow: 4; }  #r1 .view {   flex-grow: 1;   border: black 1px solid;   border-top: none;   border-right: none; }  #r1 .view:last-child {   border-right: black 1px solid; }   /* row 1 */   /* row 2 */  #r2 .view {   border: black 1px solid;   border-top: none;   flex-grow: 1; }  #r2 {   display: flex;   flex-grow: 1; }   /* row 2 */   /* rows */   /* views */   /* frame ctrl */  #frame-ctrl-cntnr {   display: flex; }  .frame-ctrl {   border: black 1px solid;   border-top: none;   border-right: none; }  .frame-ctrl:last-child {   border-right: black 1px solid; }  #frame-num {   width: 50px; }  #frame-range-cntnr {   flex-grow: 1;   padding: 4px; }   /* frame ctrl */ 

you can use nested flexbox center inner element instead.

jsfiddle

#view-ctrls-cntnr {   flex: 1;   display: flex;   justify-content: center; } 

or use margin tricks:

jsfiddle

#view-ctrls-cntnr {   margin-left: auto;   margin-right: auto; } 

note, it's #view-ctrls-cntnr not .view-ctrls-cntnr.

edit: center in entire viewport width, can set sibling element absolute position: #file-btn {position: absolute;} may cause overlapping in small viewport width.

jsfiddle

other that, can give left sibling fixed width, i.e. 80px , add pseudo :after element on container same width set. there equal space on left , right.

.menubar:after {   content: "";   width: 80px; } #file-btn {   width: 80px; } 

jsfiddle