Jack Sewell Jack Sewell - 6 months ago 3
HTML Question

How do I vertically align a div inside of another div?

I've looked at other posts but they aren't working for me. My website (http://www.jacksewell.uk/) has a modal that fades in when you click the "Hire Me" button. Currently its not centred vertically but it is centred horizontally. I would like the modal to be centred both horizontally and vertically. Any help?
Thanks :D

Here the markup and CSS (Sass) for the modal:


<!-- The Modal -->
<div id="myModal" class="modal">

<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Ready to start your next project?</h2>
<div class="modal-body">
<form action="form_submit.php">
<span id="name">Name: </span><br><input type="text" name="client-name">
<span id="company">Company : </span><br><input type="text" name="company-name">
<span>Service: </span><br><select name="Service">
<option value="Website">Website Devlelopemnt</option>
<option value="Design">Design related tasks</option>
<option value="SEO">SEO Related tasks</option>
<option value="All">Full Package (Website designed & developed with SEO)</option>
<span id="info">Extra Detail : </span>
<textarea rows="4" cols="50">Please add more detail about what you are looking for.
<input type="submit">

CSS (Sass):

display: none
position: fixed
z-index: 1
left: 0
top: 0
width: 100%
height: 100%
overflow: hidden
background-color: black
background-color: rgba(0, 0, 0, 0.5)

text-align: center

background-color: #fefefe
margin: 2vh auto
padding: 20px
border: 1px solid #888
width: 80%
-webkit-animation-name: modal
-webkit-animation-duration: 450ms
animation-name: modal
animation-duration: 450ms

display: flex
flex-direction: column
align-items: center
margin: 24px
color: #212121
font-weight: 600
input, select, textarea
border-radius: 5px
padding: 6px 12px 6px 12px
margin: 10px
width: 220px
border: solid 2px #d1d1d1
outline: none
width: 250px

border-radius: 5px
border: 0
width: 260px
height: 35px
color: #fff
background: #3498db
-webkit-appearance: none

color: rgba(0, 0, 0, 0.5)
float: right
font-size: 28px
font-weight: bold
transition: all ease-in-out 0.25s
&:hover, &:focus
color: #000
text-decoration: none
cursor: pointer


This will do the trick, hope this helps!

.modal-content {
    position: relative;
    top: 50%;
    transform: translateY(-50%);