I am trying to position this text block in the center of the page on top of an image, rather than at the bottom. How can I achieve this?
Here is my code where I want the process section to be displayed in the middle of the page on top of the image.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style/styles.css" type="text/css" rel="stylesheet">
</head>
<body>
<h2 id="siteTitle">Westend</h2>
<nav>
<ul class="main_menu">
<li><a href="index.php">Home</a></li>
<li><a href="booking.php">Booking</a></li>
</ul>
</nav>
<div><img src="images/curtains.jpg" id="open"/>
<div id="process">
<br>Hi <?php echo "'".$_SESSION['name']."'"; ?></br>
Your tickets have been booked for <?php echo "'".$_SESSION['production']."'";?>
<br>Playing on <?php echo "'".$_SESSION['date']."'";?> at <?php echo "'".$_SESSION['time']."'";?> <br>
You are in <?php echo $_POST["zone"];?> in row <?php echo $_POST["row"];?><br>
The total cost is £<?php echo $_POST["quotation"];?><br>
Confirmation of your booking has been sent to: <?php echo "'".$_SESSION['email']."'"; ?><br>
Enjoy the show!
<br>
</div>
<footer id="pageBottom">
<p>© Westend 2015</p>
</footer>
</body>
</html>
This is my CSS
#process {
text-align: center;
font-family: San-Serif;
font-size: 20px;
text-shadow: 1px 1px 0 #1a1a1a;
background-color: #802000;
width: 450px;
height: 270px;
margin-top: 25px;
margin-bottom: 10px;
margin-left: 750px;
border: 1px solid white;
padding-bottom:2px;
box-shadow: 3px 4px 5px grey;
clear: inherit;
}