I want to center the content of MAIN horizontally and vertically on the page, but whichever solution I tried, it didn't work. I'm absolutely frustrated atm, because I got it to work, then I changed a lot and it reset itself.
Maybe someone could look over it and give me a hint where I'm wrong. Thank you.
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">contact@x.com </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>
