Html: Centering two div vertically and allign one of them in the left side and the other one in the-CodePudding

I'm using Bootstrap to style my html page. This is what I'm getting: Both word are at the top of the screen but I'd like for them to be in middle vertically. Also they are in the center horizontally and I need them to be on the left and the right side of the screen. Somethin like this:

This is my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

    <div >
        <div >        
            <div >
                Hello
            </div>
            <div >
                World
            </div>
        </div>
    </div>
</body>
<script src="script.js" defer></script>
</html>

I've tried different approach but very little change no metter how I edit my code.

CodePudding user response：

Perhaps you mean align the text? somewhat unclear on the question if you mean the text to the entire "block" of the column.

.container * {
  border: solid 1px pink;
  padding: 1rem;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div >
  <div >
    <div >
      Hello
    </div>
    <div >
      World
    </div>
  </div>
</div>

CodePudding user response：

* {
  background: teal;
  margin: 0;
}
a {
  text-decoration: none;
  color: black;
  font-family: 'roboto';
}

 <div >
        <div >        
            <div  style="position: absolute; top: 50%; transform: translateY(-50%); padding-left: 10px; margin: 0 auto;">
              <li style="float: left; list-style: none;"><a href="#">Hello</li></a>
            </div>
            <div  style="position: absolute; top: 50%; transform: translateY(-50%); padding-right: 10px; margin: 0 auto; right: 0%;">
              <li style="float: right; list-style: none;"><a href="#"> World </li></a>
            </div>
        </div>
    </div>