How to vertically center items in a div while keeping responsiveness?

Question

So I have looked through a billion forums and threads but still cannot get the solution I'm looking for!

I have some text and buttons I would like to be both horizontally and vertically centered in a div using Bootstrap 3.

I have some code that looks like this:

    <div class="Home" id="Home">
        <div class="row">
            <div class="col-md-4">
            </div>
            <div class="col-md-4 col-xs-12">
                <p class="home">TEXT TO BE VERTICALLY CENTERED</p>
            </div>
            <div class="col-md-4">
            </div>
        </div>
    </div>

(Please don't lecture me on using offsets. I know I should use them, I just am using those 3 divs for testing purposes haha)

Now I have used such CSS like:

.vertical-center {
min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
min-height: 100vh; /* These two lines are counted as one :-)       */
display: flex;
align-items: center;
}
.text-vcenter {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}

Yet to no avail. My text (And buttons) just stay horizontally centered on the top of the page. I know this is probably an easy fix but it has literally been killing me for weeks now! I really am using this as last resort. I have even studied on how other sites vertically align items but nothing has worked.

And please keep in mind that it needs to maintain its responsiveness. I don't want fixed solutions.

I read somewhere that a JS solution might be the trick? I am really up for anything now at this point.

EDIT

How do I vertically center text with CSS?

does not solve my problem...

Only works for a single line of text though, because we set the line's > height to the same height as the containing box element.

have you tried this? http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ — tacone, May 24 '15 at 02:16
That solution works.... BUT now my text is overflowing into the next div over. Maybe it is too big? Let me check. — Will, May 24 '15 at 02:19
mh, seems like that solution need for the div to be bigger than the text. Guess it does not fulfills your needs then. :( — tacone, May 24 '15 at 02:27
Well when I tried it, it pushed my text off the screen. So that was a no go. — Will, May 24 '15 at 02:28
try to look at this, worth a try http://stackoverflow.com/questions/18516317/vertically-align-an-image-inside-a-div-with-responsive-height — tacone, May 24 '15 at 02:29
also. Possible duplicate of pretty much half of stack overflow :) — tacone, May 24 '15 at 02:31
Not really. According to StackOverflow if those don't work I can ask a new question stating what I tried and why it didn't work and etc. And it wouldn't be considered a dupe. Because I have tried essentially everything StackOverflow has to offer. — Will, May 24 '15 at 02:35
@Will There are only so many ways to vertically center items with CSS, all of which have been covered ad nauseum on Stack Overflow. You definitely **haven't** tried everything on Stack Overflow, or you wouldn't need to ask a question about how to vertically center something. — TylerH, May 24 '15 at 02:37
Man you are just as bad as Sean in the other question. I will ask you nicely to leave as you arent being constructive in finding a solution. I have tried many things. Instead of getting more ideas we are just sitting here arguing. @TylerH — Will, May 24 '15 at 02:42
I found this link in the answer linked by @TylerH, seems to work well for your use case https://css-tricks.com/centering-in-the-unknown/ take a look! (the embedded codepen uses fixed heights, but you can just remove them) — tacone, May 24 '15 at 03:00
@Will Educating you on how this website works is not remotely comparable to ad hominem attacks. If you don't want to use the site properly, you don't have to use the site at all. I have been most constructive in that I have actually linked you to a thread which solves your problem. — TylerH, May 24 '15 at 03:35
@TylerH And I said that it didn't work for me. But I guess you can't see. '@Will There are only so many ways to vertically center items with CSS, all of which have been covered ad nauseum on Stack Overflow. You definitely haven't tried everything on Stack Overflow, or you wouldn't need to ask a question about how to vertically center something.' Was pretty rude and OT if you ask me... — Will, May 24 '15 at 18:30
@Will No, it was matter-of-fact, not rude. If one of the 19 linked answers did not "work for you", then you have additional problems with your code and you need to adjust your question appropriately. The answer you accepted here is already given in the linked questions. So you are being hypocritical when you say that none of those worked for you. I'm not trying to be rude, just pointing out observable facts. — TylerH, May 24 '15 at 19:50

score 2 · Accepted Answer · answered May 24 '15 at 02:19

2

Do you need to use bootstrap? What you have so far is incredibly convoluted simply to center some text.

This is all you need:

#centered {
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%);
}

http://codepen.io/anon/pen/xGEvbx

Please see this article for more information on centring with css.

answered May 24 '15 at 02:19

Christopher Reid

4,318
3
35
74

What do you mean "Do you need to use bootstrap?" Its a responsive framework. And I didn't ask for people to come here and critique my code. I was just explaining some methods from OTHER people that I have tried out. – Will May 24 '15 at 02:22
@Will I'm just trying to help... and if you don't want your code critiqued, you shouldn't be on stack overflow. You can still use bootstrap as much as you like, but you don't need it for this solution at all as a very simple one is available. I'm sorry you feel the need to get aggressive and downvote me, but it doesn't make much sense considering that I have given you a perfectly usable solution to your problem. – Christopher Reid May 24 '15 at 02:29
Not even. This solution only works with one line of text. As I mentioned in my question I have some text as well as buttons. And no one was getting aggressive, as I don't have enough reputation to down vote. Thanks for the answer though. – Will May 24 '15 at 02:33
1

@Will this solution works with any amount of content and lines. http://codepen.io/anon/pen/xGEvbx . Sorry for accusing you of downvoting. But dismissing this as a stupid answer is ridiculous. – Christopher Reid May 24 '15 at 02:35
@Will Sean was pretty aggressive with his offensive comment, and you agreed with him, which makes you passive aggressive at best. AllTheTime's question of whether you *need* bootstrap was a valid one. When you ask a question on Stack Overflow, you don't get to determine the quality or content of others' answers; if your question code is convoluted for what you're trying to do, a good answer *will* point that out and attempt to simplify it. That is the point of this site; high quality answers to programming questions. – TylerH May 24 '15 at 02:36
@AllTheTime it does not work with fluid height containers, because they may get smaller than the contained text. See the comment thread below the question. – tacone May 24 '15 at 02:37
Yessir master @TylerH But no this doesn't seem to be working with col-md-* in bootstrap. And yeah I DO need bootstrap. Sorry for not making that clear! It is making all the text in the center and overlap eachother – Will May 24 '15 at 02:39
@TylerH the code is not convoluted, it is simply a try to solve a problem. Nobody said bootstrap was included to solve that problem, bootstrap was likely a requirement for the wider project itself. Suggesting to remove it is missing the point completely. – tacone May 24 '15 at 02:39
@Will I'm not suggesting to remove it. I'm suggesting that for this one centered element, to not use bootstrap classes. You can combine normal css and bootstrap. Also, it would be helpful to see what you've tried in a codepen so we can help. – Christopher Reid May 24 '15 at 02:39
@tacone I'm not advocating for the removal of anything from OP's code. I'm merely explaining to him how Stack Overflow works. – TylerH May 24 '15 at 02:40
Right @AllTheTime You are very right. Except I need this to be fluid. And you said something about it not being fluid? – Will May 24 '15 at 02:43
@Will what do you mean by fluid? This will always be in the center of the page (horizontal and vertical), and will recenter itself as the content inside it changes. You can set `max-width` and `min-width` on it so that the content has a limit as to how wide it gets. I constantly use this in production to create centered modals and titles and the like. You need to add all vendor prefixes to transform to be safe though. (ex: `-ms-transform: translate(...)` for internet explorer) – Christopher Reid May 24 '15 at 02:49
As @tacone said above `@AllTheTime it does not work with fluid height containers, because they may get smaller than the contained text. See the comment thread below the question.` However this will work you are correct. It just wont work with bootstrap spanning divs. – Will May 24 '15 at 02:54
It honestly never crossed me as a good idea to just use regular html in a bootstrap document. Glad to have this for further reference! – Will May 24 '15 at 02:54
@Will you are probably correct that it could be considered bad practice to mix styling methods when using bootstrap. But bootstrap is simply a bunch of css classes (and javascript functions) that you can apply to regular html, and modify as much as you like. You are still using regular html, and if bootstrap doesn't offer a simple solution, there doesn't seem to be a good reason not to go with the one that exists! Anyways, glad I could help. – Christopher Reid May 24 '15 at 03:02
@AllTheTime you wouldn't mind to changing the CodePen back to how it was before you changed it using bootstrap would you? Just so I can use it as reference. – Will May 24 '15 at 03:08
@Will Oh sorry, I didn't realize I saved that, I was just going to mess around with bootstrap a bit. One sec. – Christopher Reid May 24 '15 at 03:14
@Will also, I was just reading an article on flexbox that might be of interest to you, now or in the future: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ – Christopher Reid May 24 '15 at 03:52

How to vertically center items in a div while keeping responsiveness?

1 Answers1