How to align text in the center of the vertical axis of a div in HTML?

Question

How can I align text in the center of the vertical axis of a div in HTML? I've tried using text-align:center; but it only centers the text on the horizontal axis. Is there an equivalent statement for the Y axis? I'm trying to do this to every div with the .subcol class and the div with the #top id.

body {
  margin: 15px;
}

.subcol {
  background: teal;
  color: white;
  border-radius: 7px;
  text-align: center;
  margin: 0 5px 5px 0;
  height: 50px;
}

#top {
  background: cyan;
  width: 100%;
  height: 150px;
  text-align: center;
  font-style: bold;
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div id="top">Hello World Page</div>
<div class="row">
  <div class="col-lg-6 col-sm-12">
    <div class="subcol">
      Hello World 1
    </div>
  </div>
  <div class="col-lg-6 col-sm-12">
    <div class="subcol">
      Hello World 2
    </div>
  </div>
  <div class="col-lg-6 col-sm-12">
    <div class="subcol">
      Hello World 3
    </div>
  </div>
  <div class="col-lg-6 col-sm-12">
    <div class="subcol">
      Hello World 4
    </div>
  </div>
</div>

BeHappy · Answer 1 · 2020-05-08T19:58:23.267

You can achieve that simply with flex:

display: flex;
justify-content: center;
align-items: center;

justify-content: center -> for horizontally center.

align-items: center -> for vertically center.

Just add this css to classes you want.

Working usage:

        body{
            margin:15px;
        }
        .subcol {
            background:teal;
            color:white;
            border-radius:7px;
            text-align:center;
            margin:0 5px 5px 0;
            height:50px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #top {
            background:cyan;
            width:100%;
            height:150px;
            text-align:center;
            font-style:bold;
                        display: flex;
            justify-content: center;
            align-items: center;
        }

    <div id="top">Hello World Page</div>
    <div class="row">
        <div class="col-lg-6 col-sm-12">
            <div class="subcol">
                Hello World 1
            </div>
        </div>
        <div class="col-lg-6 col-sm-12">
            <div class="subcol">
                Hello World 2
            </div>
        </div>
        <div class="col-lg-6 col-sm-12">
            <div class="subcol">
                Hello World 3
            </div>
        </div>
        <div class="col-lg-6 col-sm-12">
            <div class="subcol">
                Hello World 4
            </div>
        </div>
    </div>

I think you forgot `flex-direction: column;`. – D. Pardal May 08 '20 at 19:50 — D. Pardal, May 08 '20 at 19:50
But I think it depends what he wants to do. – BeHappy May 08 '20 at 19:53 — BeHappy, May 08 '20 at 19:53
@Serket I add working code snippet. – BeHappy May 08 '20 at 19:59 — BeHappy, May 08 '20 at 19:59

score -1 · Answer 2 · answered May 08 '20 at 19:46

Add line-height same as the height of you div.

 body{
            margin:15px;
        }
        .subcol {
            background:teal;
            color:white;
            border-radius:7px;
            text-align:center;
            margin:0 5px 5px 0;
            height:50px;
            line-height:50px; /* added */
        }
        #top {
            background:cyan;
            width:100%;
            height:150px;
            line-height:150px;  /* added */
            text-align:center;
            font-style:bold;
        }

    <title>Bootstrap Test</title>
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

    <div id="top">Hello World Page</div>
    <div class="row">
        <div class="col-lg-6 col-sm-12">
            <div class="subcol">
                Hello World 1
            </div>
        </div>
        <div class="col-lg-6 col-sm-12">
            <div class="subcol">
                Hello World 2
            </div>
        </div>
        <div class="col-lg-6 col-sm-12">
            <div class="subcol">
                Hello World 3
            </div>
        </div>
        <div class="col-lg-6 col-sm-12">
            <div class="subcol">
                Hello World 4
            </div>
        </div>
    </div>

score -2 · Answer 3 · answered May 08 '20 at 19:51

There ar so many ways in HTML & CSS

I usually use the following method.

I hope it was helpful to you

.p {
  width: 100px;
  height: 20px;
  position: relative;
  border: 1px solid red;
}

.c {
  width: 10px;
  height: 5px;
  border: 1px solid blue;
}

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

<div class='p'>
  <div class='c center'></div>
</div>

How to align text in the center of the vertical axis of a div in HTML?

3 Answers3