Cannot Vertically Center h3 element within div

Question

I want my h3 element to be vertically centred within the div element. I tried several solutions but any of those didn't work. Could anyone figure it out for me where I am doing wrong?

Below is my html and CSS code snippet.

HTML:

<div id="test">
    <h3 id="test_h3">This is a text</h3>
</div>

CSS:

#test{
    height: 100px;
    background-color: cadetblue;
    text-align: center;
}
#test_h3{
    vertical-align: middle;
}

#test{
    height: 100px;
    background-color: cadetblue;
    text-align: center;
}
#test_h3{
    vertical-align: center;
}

<div id="test">
    <h3 id="test_h3">This is a text</h3>
</div>

99% of the questions are already answered. Please try to find it before posting a repeated question. This is also a proper answer in w3schools resources : https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers https://www.w3schools.com/howto/howto_css_center-vertical.asp https://www.geeksforgeeks.org/how-to-vertically-center-text-with-css/ — Sarthak Kuchhal, Sep 03 '20 at 06:57
Does this answer your question? [How to vertically center a div for all browsers?](https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) — Sarthak Kuchhal, Sep 03 '20 at 06:57
I am sorry for asking naive question. I am a beginner level programmer in web development. That's why I could not figure out how to do this. I should have searched more. Thanks for your reply. — Tapashee Tabassum Urmi, Sep 03 '20 at 08:16
Don't be sorry. No question is naive nor i have commented to let you down. My sole purpose is to make understand that you should search more.. Search for answers and then finally post a question. **The more you find answer yourself the better developer you become.** — Sarthak Kuchhal, Sep 03 '20 at 09:19
This is true Bro: The more one finds answer his/herself the better developer the person would become. Thanks a lot for your great advice! :) :) — Tapashee Tabassum Urmi, Sep 03 '20 at 09:25

score 2 · Accepted Answer · answered Sep 03 '20 at 06:42

2

vertical-align: center is a joke. Make your div a flexbox, this is simple and works everytime

.your-div {
    display: flex;
    justify-content: center;
    align-items: center;
}

Where align-items: center centers the element vertically

answered Sep 03 '20 at 06:42

Tracer69

719
6
16

Thanks a lot @Tracer69. This works now. No where I found this 3 lines of code. Thanks again. – Tapashee Tabassum Urmi Sep 03 '20 at 07:58

score 0 · Answer 2 · answered Sep 03 '20 at 06:44

0

#test{
    height: 100px;
    background-color: cadetblue;
    text-align: center;
    line-height:100px
}
#test_h3{
    vertical-align: center;
}

<div id="test">
    <h3 id="test_h3">This is a text</h3>
</div>

you can use line-height css to get this. check out my snippet

answered Sep 03 '20 at 06:44

CodeBug

1,156
1
5
18

Thanks a lot @CodeBug. This works. :) – Tapashee Tabassum Urmi Sep 03 '20 at 08:01
1

a pleasure to help, can you accept the answer please, happy coding:-D – CodeBug Sep 03 '20 at 08:01
I wish I could! I have the option to accept only one answer. So, I accepted the first one. I have upvoted your answer. Thanks again for answering my question. :) – Tapashee Tabassum Urmi Sep 03 '20 at 08:12

score 0 · Answer 3 · answered Sep 03 '20 at 06:49

This is a simple case but you will encounter more complex layouts in which flex-box will shine. I recommend you to use flex-box:

#test{
    display: flex;
    height: 100px;
    background-color: cadetblue;
    justify-content: center;
    align-items: center;
}
#test_h3{
   display: flex;
   background-color: red;
}

<div id="test">
    <h3 id="test_h3">This is a text</h3>
</div>

score 0 · Answer 4 · answered Sep 03 '20 at 06:55

center is not a valid value for CSS property vertical-align. However, middle is

#test{
    height: 100px;
    line-height: 100px;
    background-color: cadetblue;
    text-align: center;
}
#test_h3{
    vertical-align: middle;
}

<div id="test">
    <h3 id="test_h3">This is a text</h3>
</div>

score -2 · Answer 5 · answered Sep 03 '20 at 06:42

-2

Try using this code

#test {
    height: 100px;
    background-color: cadetblue;
    display: flex;
    align-items: center;
    justify-content: center;
}

answered Sep 03 '20 at 06:42

Humanoid

47
6

3

Please do not just paste working code, but explain what you did. This won't help him as much – Tracer69 Sep 03 '20 at 06:43
1

Thanks for the reminder. Will note that next time – Humanoid Sep 03 '20 at 06:46

Cannot Vertically Center h3 element within div

5 Answers5