1

I want to center a block of text in the middle of a screen. I want to use bootstrap to center the text in the middle of screen to save some time.
I did it this way, but the block still in the middle horizontally, and not vertically and horizontally.

CSS: 

.block {
    top: 50%;
    left: 50%; 
}

HTML:

<div class="row">
   <div class="col-xs-4">Text</div>
</div>
Mardzis
  • 760
  • 1
  • 8
  • 21
user3378649
  • 5,154
  • 14
  • 52
  • 76
  • http://stackoverflow.com/questions/8865458/how-to-align-text-vertically-center-in-div-with-css – Mardzis Jan 23 '15 at 09:40
  • 1
    @Mardzis this is not my question! this is specifically about twitter bootstrap – user3378649 Jan 23 '15 at 09:50
  • possible duplicate of [How do you get centered content using Twitter bootstrap?](http://stackoverflow.com/questions/9184141/how-do-you-get-centered-content-using-twitter-bootstrap) – Paulie_D Jan 23 '15 at 10:30

4 Answers4

0

Try below code.

I just followed by your same HTML structure and just updated CSS

We can make full width also by changing HTML structure.

.row{
    display: table;
    min-height: 100px; /* Just for demo */
}
.col-xs-4{
    display: table-cell;
    vertical-align: middle;
    float: none;
    background: #000;
}

FIDDLE DEMO

JSFIDDLE WITH FULL WIDTH

shanidkv
  • 1,118
  • 1
  • 9
  • 12
  • THis doesn't work! it's not centred vertically and horizontally ? – user3378649 Jan 23 '15 at 10:02
  • Check updated fiddle. I have made it full width and min-height: 400px;. Vertical alignment always work based on height. – shanidkv Jan 23 '15 at 10:14
  • Using `px`, we cannot make responsive design. – Junaid Jan 23 '15 at 10:18
  • There is no such rule like you cannot use PX in responsive layout. According to your layout height is required to make vertical align middle. You can use px, em etc.. whatever. – shanidkv Jan 23 '15 at 10:21
0

Ok ... here is the solution !! I used it in my css !! This will help you too.

HTML

<div class="vertical-center">
   <p>My name is Khan</p>
</div>

CSS

.vertical-center {
    min-height: 100%;
    min-height: 100vh;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}
Junaid
  • 2,572
  • 6
  • 41
  • 77
0

Why are you trying to use bootstrap to center that div? If is not a requirement to using bootstrap and you only need one div centered in the middle of the screen you could do something like this:

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

.container{
bottom: 0;
height: 100px;
margin: auto;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 200px;
}

ps: yes, you should have the size of the height and width of that div

hope it helps someone!

Dario Loferrin
  • 11
  • 1
-1

try using this code to your Text then the grid system of bootstrap row/12 what you doing is 4 4 4 = 12 of the grid system

ggtaetiseo
  • 215
  • 1
  • 2
  • 8