how to center div in the middle of the page? - html

Question

After googling for hours, I am still stuck at this problem. Since I used flex-direction:column, to align the child divs hence, I used justify-content:center but the child divs look aligned to the left.
<div class=container>
<div class= "wrapper">
<div class = "image-float">
<img class = "profile-picture" src = "{% static 'images/image.jpg'%}">
</div>
<div>
<p>Welcome to Sparison...</p>
</div>
<div class="intro">
<h1>Copy code below and share with friends</h1>
</div>
<div class="url-container input-group">
<input type="text" id="random" class="url input-border form-control" value="">
<div class="input-group-append">
<span class="input-border input-group-append input-group-text">
<i class="far fa-copy url-copy-icon"></i></span>
</div>
</div>
</div>
</div>
The relevant CSS is below:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: Montserrat;
font-size: 50px;
font-weight: bold;
background-color: var(--very-pale-blue);
width:100%;
height:100vh;
}
.container{
max-width: 100%;
height: 90vh;
margin-top: 0;
}
.wrapper{
display: flex;
flex-wrap: wrap;
max-width: 100%;
height: 90vh;
justify-content: center;
flex-direction: column;
}
.url-container .input-group {
border-radius: 10px;
width: 50%;
}
.input-group {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: stretch;
align-items: stretch;
width: 50%;
/* background-color: #1DB954; */
border-radius: 2px;
}
Above is how the page renders. every element under the wrapper div should be in the middle of the page centered vertically.

Answer 1

You can find more information about flex here:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
.wrapper{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
max-width: 100%;
height: 90vh;
}
Link to jsfiddle:
https://jsfiddle.net/y4qra692/

Answer 2

Change the container width
.container {
width: 100%;
}
Then for the wrapper as you have changed the flex-direction to column you now need align-items rather than justify-content as (confusingly) when you change the direction these properties swap around:
.wrapper {
width: 100%;
display: flex;
align-items: center;
}

Answer 3

To make div centered you can add this code to .wrapper
.wrapper{
width: 50%;
margin:auto;
}

Answer 4

To make a div centered:
<section class="middle">
<div class="div">
<p>Hi</p>
</div>
</section>
Style.css
.middle {
height: 100vh; /* or height you want */
width: 100%;
position: relative;
}
.div {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}