javascript - Bootstrap: Center a container-fluid vertically

I'm trying to centre a container-fluid in it's parent container (body tag). Here is an example of my webpage :

The container in question is the one I've coloured in black to identify better. There are two other divs:

 - The top one which is a (nav class="navbar navbar-inverse navbar-fixed-top")
 - The bottom one which is a (nav class="navbar navbar-inverse navbar-fixed-bottom")

The question is: how can I centre my container-fluid (in black) to always be in the middle of my page ? The content of this container will change dynamically and I cant it to always stay in the middle (same margin top and bottom)

Thanks guys.

EDIT : as requested, HTML and CSS :

HTML :

<body ng-controller="LanguageController as language">

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#language" aria-expanded="false" aria-controls="language">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#"> {{ language.lblAppName }}</a>
  </div>
  <div class="navbar-collapse collapse" id="language">
    <div class="container vertical-center">
      <label> {{ language.lblSelectLanguage }} </label>
      <select ng-options="item for item in language.languages" ng-model="language.selectedLanguage" ng-change="language.changeLanguage()"></select>
      <button ng-click="language.editLanguage()">{{ language.lblEditLanguage }}</button>
    </div>
  </div>
   </div>
 </nav>


 <div id="corpus" class="container-fluid" ng-view="">
 </div>


<nav class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
 <div class="container-fluid">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#route" aria-expanded="false" aria-controls="route">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="navbar-brand"> {{ language.lblFooter }} </div>
  </div>
  <div id="route" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#"> {{ language.lblMainPage }} </a></li>
      <li><a href="#">{{ language.lblFirstPage }}</a></li>
      <li><a href="#">{{ language.lblSecondPage }}</a></li>
      <li><a href="#">{{ language.lblThirdPage }}</a></li>
    </ul>
  </div>
  </div>
</nav>

CSS :

 body {
padding-top: 70px;
/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-    top. Change if height of navigation changes. */
 }

.container {
 display: table;
}

.vertical-center {
 display: table-cell;
 padding-top: 1%;
 padding-left: 5%;
}

.vertical-center label.ng-binding{
color:grey;
}


div#corpus.container-fluid.ng-scope {
background-color:default;
}

div#mainDiv a.ng-binding {
color: black;
text-decoration: underline;
}

.top-buffer { 
margin-top:2%; 
}

I'm trying to centre a container-fluid in it's parent container (body tag). Here is an example of my webpage :

The container in question is the one I've coloured in black to identify better. There are two other divs:

 - The top one which is a (nav class="navbar navbar-inverse navbar-fixed-top")
 - The bottom one which is a (nav class="navbar navbar-inverse navbar-fixed-bottom")

Thanks guys.

EDIT : as requested, HTML and CSS :

HTML :

<body ng-controller="LanguageController as language">

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#language" aria-expanded="false" aria-controls="language">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#"> {{ language.lblAppName }}</a>
  </div>
  <div class="navbar-collapse collapse" id="language">
    <div class="container vertical-center">
      <label> {{ language.lblSelectLanguage }} </label>
      <select ng-options="item for item in language.languages" ng-model="language.selectedLanguage" ng-change="language.changeLanguage()"></select>
      <button ng-click="language.editLanguage()">{{ language.lblEditLanguage }}</button>
    </div>
  </div>
   </div>
 </nav>


 <div id="corpus" class="container-fluid" ng-view="">
 </div>


<nav class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
 <div class="container-fluid">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#route" aria-expanded="false" aria-controls="route">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="navbar-brand"> {{ language.lblFooter }} </div>
  </div>
  <div id="route" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#"> {{ language.lblMainPage }} </a></li>
      <li><a href="#">{{ language.lblFirstPage }}</a></li>
      <li><a href="#">{{ language.lblSecondPage }}</a></li>
      <li><a href="#">{{ language.lblThirdPage }}</a></li>
    </ul>
  </div>
  </div>
</nav>

CSS :

 body {
padding-top: 70px;
/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-    top. Change if height of navigation changes. */
 }

.container {
 display: table;
}

.vertical-center {
 display: table-cell;
 padding-top: 1%;
 padding-left: 5%;
}

.vertical-center label.ng-binding{
color:grey;
}


div#corpus.container-fluid.ng-scope {
background-color:default;
}

div#mainDiv a.ng-binding {
color: black;
text-decoration: underline;
}

.top-buffer { 
margin-top:2%; 
}

Share Improve this question edited Sep 19, 2016 at 13:53 asked Sep 19, 2016 at 13:34 Cassifiore 891 gold badge1 silver badge10 bronze badges

provide html and css for the elements – Dejan.S Commented Sep 19, 2016 at 13:48
You might find an Angular directive out there that can do this. Could the content ever be larger than the visible screen? If so, think about changing your layout when this happens. – spongessuck Commented Sep 19, 2016 at 13:50
@Dejan.S Done, thanks – Cassifiore Commented Sep 19, 2016 at 13:54
@spongessuck I want to center it vertically, So that the padding is the same at the top and the bottom. – Cassifiore Commented Sep 19, 2016 at 13:54

Add a ment |

1 Answer 1

Sorted by: Reset to default 3

Basically, this question has been answered before.

.vertical-center {
  min-height: 100%;
  min-height: 100vh; 
  display: flex;
  align-items: center;
}

<div class="container-fluid vertical-center">
    Vertically centered in body.....
</div>

http://www.bootply./oX2f8eBxFv

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Bootstrap: Center a container-fluid vertically - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)