How can I have the following code centered vertically? It's already centered vertically, but I can't figure out how to have it center in into the middle of the screen. Also, I'd like to add some small links under the input field like "About | Report Image | Etc" but they're also not centering correctly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex">
<title>Upload</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,300);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,300);
body {
font: 12px 'Open Sans';
}
.form-control, .thumbnail {
border-radius: 2px;
}
.btn-danger {
background-color: #B73333;
}
body {
font-size: 80%;
padding: 20px;
}
.center-block {
float: none;
margin: 0 auto;
}
main {
position: relative;
background: white;
height: 200px;
width: 60%;
margin: 0 auto;
padding: 20px;
resize: both;
overflow: auto;
}
main div {
background: black;
color: white;
width: 200px;
height: 100px;
margin: -70px 0 0 -120px;
position: absolute;
top: 50%;
left: 50%;
padding: 20px;
}
/* File Upload */
.fake-shadow {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.fileUpload {
position: relative;
overflow: hidden;
}
.fileUpload #upload_form {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 33px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
.img-preview {
width: 100%;
}
.container>.row>.col-md-6 {
margin: 0 auto;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6 center-block">
<div class="form-group">
<div class="main-img-preview center-block">
<img class="thumbnail img-preview" src="http://farm4.static.flickr.com/3316/3546531954_eef60a3d37.jpg" title="Preview Logo">
</div>
<div class="input-group">
<input id="fakeUploadLogo" class="form-control fake-shadow" placeholder="Select Image" disabled="disabled">
<div class="input-group-btn">
<div class="fileUpload btn btn-danger fake-shadow">
<span><i class="glyphicon glyphicon-upload"></i> Upload Image</span>
<form id="image_form" action="upload_image" method="post">
<input class="attachment_upload" id="upload_form" name="image" type="file" enctype="multipart/form-data">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var brand = document.getElementById('upload_form');
brand.className = 'attachment_upload';
brand.onchange = function() {
document.getElementById('fakeUploadLogo').value = this.value.substring(12);
};
function AKUpload(input) {
var xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
window.location.replace(this.responseText);
}
};
xmlHttpRequest.open("POST", '/upload_image', true);
var formData = new FormData();
formData.append("file", input.files[0]);
xmlHttpRequest.send(formData);
console.log(xmlHttpRequest.response);
}
$("#upload_form").change(function() {
AKUpload(this);
});
});
</script>
</body>
</html>
