1

Trying to center a div containing some text in a very simple website I'm doing. Managed to get in centered vertically but cannot get in centered horizontally:

#welcome-section{
    border: 10px solid blue;/*temporary for control*/
    display: block;
    height: 100vh;/*U.S. 10 100% viewport height*/
    width: 100vw;/*100% viewport width*/
    background-color: red;
    color: white;
}
.hellotext{
    position: absolute;
    top: 50%;
    border: 10px solid pink;
}
<body>
        <header id="welcome-section"><!--U.S. 1-->
            <div class="hellotext">
                <h1>¡Hola! I'm Carlos</h1><!--U.S. 2-->
                <h4>text text text</h4>
            </div>
        </header><!--U.S. 1-->
</body>

I would want the h1 and h4 to be horizontally and vertically aligned, and ideally responsive, and always stay bang in the middle.

Ulysse BN
  • 10,116
  • 7
  • 54
  • 82
Carlosdevelopmentpath
  • 23
  • 1
  • 5
  • Does this help https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div ? – leun4m Sep 16 '20 at 16:17
  • Check this out: https://codepen.io/chrisoncode/pen/xvyrYN?editors=1100 – Heather New Sep 16 '20 at 16:23
  • Great tutorial: https://scotch.io/tutorials/centering-things-with-css-flexbox#:~:text=To%20get%20the%20box%20to,justify%2Dcontent%20to%20center%20horizontally!&text=By%20default%2C%20justify%2Dcontent%20refers,to%20center%20horizontally%20with%20flexbox. – Heather New Sep 16 '20 at 16:23

3 Answers3

0

Use either flexbox or css-grid for super-easy vertical and horizontal centering. Put the below code on the parent container:

    display: grid;
    place-items: center;


#welcome-section{
    display:grid;
    place-items: center;
    border: 1px solid blue;/*temporary for control*/
    XXXdisplay: block; <== DISABLED
    height: 100vh;/*U.S. 10 100% viewport height*/
    width: 100vw;/*100% viewport width*/
    background-color: red;
    color: white;
}
<body>
  <header id="welcome-section">
    <!--U.S. 1-->
    <div class="hellotext">
      <h1>¡Hola! I'm Carlos</h1>
      <!--U.S. 2-->
      <h4>text text text</h4>
    </div>
  </header>
  <!--U.S. 1-->
</body>

The same effect in flexbox can be achieved like this (again, place this CSS on the parent container):

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

References:

https://1linelayouts.glitch.me/

YouTube video of the same above article by the author

GREAT simple Flexbox cheat sheet

BETTER video quick-tut of flexbox

cssyphus
  • 37,875
  • 18
  • 96
  • 111
-1

You will not need to give position:absolute and top:50% value CSS display:flex will serve the purpose for you.

Following 3 lines will serve the purpose and act responsively across media. display: flex; justify-content: center; align-items: center;

#welcome-section{
    border: 10px solid blue;/*temporary for control*/
    display: block;
    height: 100vh;/*U.S. 10 100% viewport height*/
    width: 100vw;/*100% viewport width*/
    background-color: red;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.hellotext{
    /*position: absolute;*/
    /*top: 50%;*/
    border: 10px solid pink;
}
<body>
        <header id="welcome-section"><!--U.S. 1-->
            <div class="hellotext">
                <h1>¡Hola! I'm Carlos</h1><!--U.S. 2-->
                <h4>text text text</h4>
            </div>
        </header><!--U.S. 1-->
</body>
Ritika Gupta
  • 376
  • 1
  • 16
-1

Try these:

.hellotext{
    position: absolute;
    top: 50%;
    border: 10px solid pink;
    margin-left: 40%;
}
h4{
    text-align: center;
}
h1:hover, h4:hover{
    color: blue;
}
Reymart Vega
  • 9