Centering a div between two elements vertically

Question

So I have two elements, in my case an image and a button. I have the image at the top of the page and the button at the bottom. I want to have a div (or some other element) to display text, but I need it centered between the two elements.

<div style="text-align: center;">
<img src="http://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="" />
<div style="text-align: center; border: 3px solid blue;">Help</div>
<button style="position: absolute; bottom: 5px;">Hi</button></div>

JSFIDDLE

I'm using HTML and Javascript.

[this article](http://vanseodesign.com/css/vertical-centering/) helped me to vertically center a css element. — Ulysse BN, Jul 11 '17 at 16:44
Possible duplicate of [How to verticaly align into the center of the content of a div with defined width/height?](https://stackoverflow.com/questions/10968726/how-to-verticaly-align-into-the-center-of-the-content-of-a-div-with-defined-widt) — Ulysse BN, Jul 11 '17 at 16:53

score 0 · Answer 1 · answered Jul 11 '17 at 16:49

0

Look into flexbox for modern layouts: a guide to flexbox

answered Jul 11 '17 at 16:49

T4rk1n

1,380
12
15

score 0 · Answer 2 · answered Jul 11 '17 at 16:57

You could use flexbox, as suggested in other answers. This can be hard to wrangle sometimes though, at your first go at it. Though it's highly recommended to add flexbox to your tool belt.

To fix this perhaps more simply: 1.) You could set the height of the parent div (to whatever you want) and then set the margin-top on the element that you want to make centered. You can tweak it until it sits right. OR... 2.) Alternatively: You could also set the position:relative; and the top: 100px (or whatever sets it into the middle. Setting the position rule will allow you to set top, or left, right or bottom. Without setting the position rule, you can't use those rules.

score 0 · Answer 3 · answered Jul 11 '17 at 17:00

0

Create a <div></div> to hold your text whatever you want to put in it and then manipulate that with CSS.

answered Jul 11 '17 at 17:00

Code_Buddy9000

3
2

score 0 · Answer 4 · answered Jul 11 '17 at 17:08

Flexbox provides the best and the short solution from the traditional solutions. You can find the working fiddle here https://jsfiddle.net/rr0e4qh7/14/

Your Html

    <div class="container">
        <div class="image">
          <img src="http://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="" />
        </div>
        <div class="text">
          Help
        </div>
        <div class="btn">
          <button>
            My Button
          </button>
        </div>
   </div>

Here is CSS part

.container{
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
  align-items: center;
}
.text{
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center
}

Centering a div between two elements vertically

4 Answers4