how to center div with html and css only - html

Question

How can I center my webpage only with html & css? I tried it with margin: auto, margin: 0 auto and also margin-left: auto & margin-right: auto. Nothing seems to work from the things I've read on the internet. I'll show you my code. I want that everything is centered. Every Div. And compatible with mobile Applications.
body {
background-color: white;
font-family: Arial, Helvetica, sans-serif;
}
#header {
display: flex;
justify-content: center;
align-items: center;
color: black;
margin-top: 50px;
font-size: 40px;
font-weight: bold;
}
.social {
float: left;
text-align: center;
margin-bottom: 20px;
position: relative;
right: -220px;
bottom: -70px;
}
.social #spotifylogo {
position: relative;
bottom: -7px;
}
.social #fblogo {
position: relative;
bottom: 1px;
left: -1px;
}
.social #twitterlogo {
position: relative;
bottom: 1px;
left: 6px;
}
.nav {
text-align: center;
color: black;
font-size: 14px;
float: left;
position: relative;
right: -495px;
margin-top: 25px;
}
.nav a:link {
text-decoration: none;
color: black;
margin-right: 15px;
}
.nav a:hover {
color: greenyellow;
}
#headpic {
position: relative;
right: -225px;
bottom: -100px;
}
<h1 id="header">cyberpVnk</h1>
<div class="nav">
Start
Musik-Player
Video-Player
Biografie
Kontakt
</div>
<div class="social">
<img src="https://image.flaticon.com/icons/svg/87/87390.svg" width="25" height="25">
<img src="spotify.png" width="40" height="40" id="spotifylogo">
<img src="fbbutton.png" width="26" height="26" id="fblogo">
<img src="https://www.nicepng.com/png/full/84-842524_twitter-logo-in-circular-black-button-twitter-logo.png" width="27" height="27" id="twitterlogo">
</div>
<div id="headpic">
<img src="headpic.jpg" width="900" height="500">
</div>

Answer 1

if you want center items you can use 'flex-box'
something like this
html
<div class="Aligner">
<div class="Aligner-item">…</div>
</div>
and css
.Aligner {
display: flex;
align-items: center;
justify-content: center;
}
for this to work just warp the items with flex box (display: flex) you just put it on your title (h1)
this code is from this article :
https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
also there is much more you can do with flex box
can also read abut flex box at w3s
https://www.w3schools.com/css/css3_flexbox.asp

Answer 2

I made several tweaks but mainly removed all the flexbox information - this was the biggest change across the CSS edits. Hope this helps!
body {
background-color: white;
font-family: Arial, Helvetica, sans-serif;
}
#header {
color: black;
margin-top: 50px;
font-size: 40px;
font-weight: bold;
text-align: center;
}
.social {
text-align: center;
margin-bottom: 20px;
}
.nav {
text-align: center;
color: black;
font-size: 14px;
}
.nav a:link {
text-decoration: none;
color: black;
margin-right: 15px;
}
.nav a:hover {
color: greenyellow;
}
#headpic {
display: block;
max-width: 100%;
height: auto;
}
#headpic-image {
display: block;
margin: auto;
}
<h1 id="header">cyberpVnk</h1>
<div class="nav">
Start
Musik-Player
Video-Player
Biografie
Kontakt
</div>
<div class="social">
<img src="https://image.flaticon.com/icons/svg/87/87390.svg" width="25" height="25">
<img src="spotify.png" width="40" height="40" id="spotifylogo">
<img src="fbbutton.png" width="26" height="26" id="fblogo">
<img src="https://www.nicepng.com/png/full/84-842524_twitter-logo-in-circular-black-button-twitter-logo.png" width="27" height="27" id="twitterlogo">
</div>
<div id="headpic">
<img id="headpic-image" src="headpic.jpg" width="900" height="500">
</div>

Answer 3

Do not use properties such as top,bottom,left,right to align items unless necessary. It's impossible to get a sensible layout in this way. You do not need to use position: "relative" for each item. A lot of your codes are wrong. I took these parts to comment lines for you to see. You can use flexbox for some structures to center items. Often marginx "auto" will work for inline-block or block-sized elements.
body {
background-color: white;
font-family: Arial, Helvetica, sans-serif;
}
#header {
display: flex;
justify-content: center;
align-items: center;
color: black;
/* margin-top: 50px; */
font-size: 40px;
font-weight: bold;
}
.social {
/* float: left; */
text-align: center;
display: flex;
justify-content: center;
/* margin-bottom: 20px;
position: relative;
right: -220px;
bottom: -70px; */
}
.social #spotifylogo {
/* position: relative;
bottom: -7px; */
}
.social #fblogo {
/* position: relative; */
/* bottom: 1px;
left: -1px; */
}
.social #twitterlogo {
/* position: relative; */
/* bottom: 1px;
left: 6px; */
}
.nav {
text-align: center;
color: black;
font-size: 14px;
display: flex;
justify-content: center;
/* float: left;
position: relative;
right: -495px;
margin-top: 25px; */
}
.nav a:link {
text-decoration: none;
color: black;
margin-right: 15px;
}
.nav a:hover {
color: greenyellow;
}
#headpic {
text-align: center;
/* position: relative; */
/* right: -225px;
bottom: -100px; */
}
<h1 id="header">cyberpVnk</h1>
<div class="nav">
Start
Musik-Player
Video-Player
Biografie
Kontakt
</div>
<div class="social">
<img src="https://image.flaticon.com/icons/svg/87/87390.svg" width="25" height="25">
<img src="spotify.png" width="40" height="40" id="spotifylogo">
<img src="fbbutton.png" width="26" height="26" id="fblogo">
<img src="https://www.nicepng.com/png/full/84-842524_twitter-logo-in-circular-black-button-twitter-logo.png" width="27" height="27" id="twitterlogo">
</div>
<div id="headpic">
<img src="headpic.jpg" width="900" height="500">
</div>

Answer 4

add this in your CSS
div_id(div that you want to change) {
margin: 0 auto;
}