How to vertically center text in bootstrap 3?

Question

Edited for better understanding:

html,body {
    height:100%;
    padding:0;
}
#home {
 color: black;
 background-color: rgba(0, 0, 0, 0);
    background-repeat: no-repeat;
    background-image: url(../images/bg-1.jpg);
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 100%;
    opacity: 1;
    visibility: inherit;
    min-height:100%;
}

#home .vcenter {
 vertical-align: middle;
    display: inline-block;
    float: none;
    border: 1px solid white;
}

<section id="home">
  <div class="container-fluid">
    <div class="row">
   <div>
  <h1 class="text-center vcenter">Heading</h1>
  <h3 class="text-center vcenter">Sub Heading</h3>
   </div>
 </div>
  </div>
</section>

I have tried the above but it's not working. I have used min-height in section id because i want the bg image to be full screen as per screen size but the text is not vertically and horizontally center.

I want the text to appear center of page according to screen size.

I want the headings to go where its written 1920x1080.

Thanks!

Did you try giving a minimum height to the parent div? `header` — Rohit Agre, Dec 01 '16 at 05:49
Try using table with height 100% and width 100%, set cell text-align: center; example:

Welcome — santosh, Dec 01 '16 at 05:51
this may be helpfull to you .. http://stackoverflow.com/a/27771750/6107715 — Shivkumar kondi, Dec 01 '16 at 05:52

claudios · Accepted Answer · 2016-12-01T06:08:34.800

2

Just replace the vcenter class to pagination-centered. That should work. And adjust padding on top. No need to add custom dirty css to get things done.

.section-content {
  padding-top: 10%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section id="header">
    <div class="container-fluid">
        <div class="row">
            <div class="section-content">
                <h1 class="text-center pagination-centered">Heading</h1>
                 <h3 class="text-center pagination-centered">Sub heading</h3>
             </div>
          </div>
     </div>
 </section>

Or if you wanted it to be vertically centered on all screen sizes:

.section-center__full {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section id="header">
    <div class="container-fluid">
        <div class="row">
            <div class="section-center__full">
                <h1 class="text-center">Heading</h1>
                 <h3 class="text-center">Sub heading</h3>
             </div>
          </div>
     </div>
 </section>

edited Dec 01 '16 at 06:08

answered Dec 01 '16 at 05:52

claudios

6,588
8
47
90

but then its not in middle of screen in big screens. – Leo the lion Dec 01 '16 at 05:57
Thanks Worked For me. Sorry I don't have enough reputation to select this answer. – Phoenix Dec 01 '16 at 06:00
@Phoenix, It's okay I'm not after to votes. I'm just here to help and to learn also :) – claudios Dec 01 '16 at 06:04
@Leothelion, I added a lil bit of snippet on my answer above. Please let me know :) – claudios Dec 01 '16 at 06:08
@claudios thats my point. That you have to add little bit custom css to make it center :) – Leo the lion Dec 01 '16 at 06:18
@Leothelion, Yeah. First option in simplest form. But needs to customize to meet our different needs. – claudios Dec 01 '16 at 06:21

score 2 · Answer 2 · answered Dec 01 '16 at 06:02

There can be many possible variants for this.

Method # 01:

Use css3 flexbox. You can use following HTML structure for this. In my opinion .container-fluid, .row and div inside .row is excess in this case.

<section id="header">
  <h1 class="vcenter">Heading</h1>
  <h3 class="vcenter">Sub heading</h3>
</section>

And following css:

#header {
  justify-content: center;
  align-items: center;
  display: flex;
  height: 100vh;
}

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

#header {
  justify-content: center;
  align-items: center;
  display: flex;
  height: 100vh;
}
#header .vcenter {
  margin: 0;
}

<section id="header">
  <h1 class="vcenter">Heading</h1>
  <h3 class="vcenter">Sub heading</h3>
</section>

Method # 02:

Use table properties. For this however you will need one more wrap. Use following HTML structure:

<section id="header" class="text-center">
  <div>
    <h1 class="text-center vcenter">Heading</h1>
    <h3 class="text-center vcenter">Sub heading</h3>
  </div>
</section>

And following css:

#header {
  display: table;
  height: 100vh;
  width: 100%;
}
#header > div {
  vertical-align: middle;
  display: table-cell;
}

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

#header {
  display: table;
  height: 100vh;
  width: 100%;
}
#header > div {
  vertical-align: middle;
  display: table-cell;
}
#header .vcenter {
  vertical-align: middle;
  display: inline-block;
  margin: 0;
}

<section id="header" class="text-center">
  <div>
    <h1 class="vcenter">Heading</h1>
    <h3 class="vcenter">Sub heading</h3>
  </div>
</section>

score 0 · Answer 3 · answered Dec 01 '16 at 05:54

0

You try using position:absolute to you center div and give 100vh height to your main div.

body {
  margin: 0;
}
#header {
  width: 100%;
  background: #333;
  height: 100vh;
  position: relative;
}
#header .vcenter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
    z-index: 10;
}
#header .vcenter h1 {
  margin-top: 0;
}

<section id="header">
  <div class="container-fluid">
    <div class="row">
      <div class="vcenter">
        <h1 class="text-center">Heading</h1>
        <h3 class="text-center">Sub heading</h3>
      </div>
    </div>
  </div>
</section>

answered Dec 01 '16 at 05:54

Manish Patel

3,648
1
14
22

Thanks Worked as I wanted! Both answer does the job. – Phoenix Dec 01 '16 at 06:02
@manish nice answer but just a suggestion, try not to use position until and unless its only last option. just a suggestion mate. – Leo the lion Dec 01 '16 at 06:21

score -2 · Answer 4 · answered Dec 01 '16 at 06:02

Please try this code.

html,body {
    height:100%;
    padding:0;
}
#home {
 color: black;
 background-color: rgba(0, 0, 0, 0);
    background-repeat: no-repeat;
    background-image: url(../images/bg-1.jpg);
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 100%;
    opacity: 1;
    visibility: inherit;
    min-height:100%;
}

#home .vcenter {
 vertical-align: middle;
    display: inline-block;
    float: none;
    border: 1px solid white;
}

section{
  height:100%;
  display:flex;
  align-items:center;
  align-content:center;

}

<section id="home">
  <div class="container-fluid">
    <div class="row">
   <div>
  <h1 class="text-center vcenter">Heading</h1>
  <h3 class="text-center vcenter">Sub Heading</h3>
   </div>
 </div>
  </div>
</section>

you can view codepen link http://codepen.io/santoshkhalse/pen/oYoKMP

please read full question as op wants in middle of screen like he showed in image but not in vertically center only. — Leo the lion, Dec 01 '16 at 06:20

How to vertically center text in bootstrap 3?

4 Answers4