Trying to center the content of MAIN both horizontally and vertically on the page has been a challenge. None of the solutions I've attempted seem to work, and it's frustrating because I had it working before making changes that caused it to reset.
If anyone could take a look and provide some guidance on where I might be going wrong, I would greatly appreciate it.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/********** LANDINGPAGE.CSS **********/
/********** **********/
*, header, footer {
font-family: 'Roboto', sans-serif;
font-size: 1vw;
color: #4c4c4c;
letter-spacing: 0.05em;
text-decoration: none;
}
h1 {
font-family: 'Lato', sans-serif;
font-weight: normal;
font-size: 4vw;
}
/********** SITE **********/
.wrap_site {
max-width: 100%;
margin: 0 5%;
}
.wrap_content {
display: flex;
align-items: center;
justify-content: center;
}
.button {
border: 1px solid #4c4c4c;
display: inline-block;
cursor: pointer;
font-size: 1vw;
padding: 8px 18px;
background-color: white;
}
.button:hover {
transition: background-color 0.5s ease;
color: white;
background-color: #4c4c4c;
}
/********** HEADER **********/
.wrap_header {
left: 0;
right: 0;
top: 0;
border-bottom: 1px solid #4c4c4c;
padding-top: 1rem;
padding-bottom: 1rem;
}
header {
display: flex;
justify-content: space-between;
}
/********** FOOTER **********/
.wrap_footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: 0 5%;
border-top: 1px solid #4c4c4c;
padding-top: 1rem;
padding-bottom: 1rem;
}
footer {
display: flex;
justify-content: space-between;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="wrap_site">
<div class="wrap_header">
<header>
<p></p> <!-- filler -->
<p>This website is currently under construction.</p></header></div>
<main class="wrap_content">
<h1>Hi, my name is x. Welcome to my website.</h1>
<h2 id="translate">你好, 我叫 x。欢迎来到我的网站。</h2>
</br>
<h2><a href="#" class="button">ABOUT ME</a></h2></main>
<div class="wrap_footer">
<footer>
<a href="mailto:x"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="75161a1b01141601350d5b161a18">[email protected]</a> 📧 </a>
<a href="imprint">⚖️ Imprint</a></footer></div></div>
<!-- AUTOTRANSLATE -->
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/x-javascript">
jQuery(function ($) {
var languages = ["¡Hola, me llamo x! Bienvenido a mi página web.", "Привет, меня зовут x. Добро пожаловать на мой сайт.","Hallo, ich heiße x. Willkommen auf meiner Webseite.", "你好, 我叫 x。欢迎来到我的网站。"];
var counter = 0;
var $exc = $('#translate')
setInterval(function () {
$exc.text(languages[counter++]);
if (counter >= languages.length) {
counter = 0;
}
}, 2500)
})
</script>
</body>
</html>