I'm working on a website and I want to make all div's at the middle of the page-CodePudding

I tried some codes which I looked from the internet but when I enlarge or miniaturize the page everything's location is changing

happens like this but when you miniaturize the this website(stack overflow) nothings location changes

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*{
    margin: 0;
    padding: 0;
}

.container{
    background-color: rgb(255, 255, 255);
    height: 100vh;
    background-size: 100% 100%;

}



.container .navbar{
    width: 50%;
    height: 150px;
    margin-left:500px;

}

.navbar ul{
    border: 5px;
    background-color: rgb(70, 68, 63);

}

.navbar ul li{
    list-style:none;
    display:inline-block;
    margin:0 8px;
    line-height: 80px;

}

.navbar ul li a{
    color: rgb(73, 255, 255);
    text-decoration: none;
    font-size: 30px;
    padding: 6px 13px;
    font-family:Roboto;
    transition: 2s;
    margin-left: 135px;

    
}

.navbar ul li a:hover{
    background-color: rgb(167, 167, 167);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="üi.css">
    <title>Tech</title>
</head>
<body>
    <div  >
        <div >
            <img src="C:\Users\****\OneDrive\Masaüstü\tech\img\Tech.png">
            <ul>
                <li><a href="index.html">Ana Sayfa</a></li>
                <li><a href="ürünler.html">Ürünler</a></li>
                <li><a href="#">İletişim</a></li>
            </ul>            
        </div>

CodePudding user response：

You can use navbar to wrap the img and the ul:

.navbar {
  margin: 0 auto; /* center the navbar horizontally in the html body. */
  display: flex;
  flex-direction: column;
  align-items: center; /* center in the cross-axis direction (row). */
}

then center the options in the ul with:

ul {
 display: flex;
 justify-content: space-evenly;
}

You can check it out at:

Note: I recommend dropping the margins you've set.

CodePudding user response：

You can create a div with flex and align-items style on the start of the container.

This will also cover all elements in the div.

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*{
    margin: 0;
    padding: 0;
}

.container{
    background-color: rgb(255, 255, 255);
    height: 100vh;
    background-size: 100% 100%;

}



.container .navbar{
    width: 50%;
    height: 150px;
    margin-left:500px;
    flex: center;
    align-items: center
}

.navbar ul{
    border: 5px;
    background-color: rgb(70, 68, 63);
}

.navbar ul li{
    list-style:none;
    display:inline-block;
    margin:0 8px;
    line-height: 80px;

}

.navbar ul li a{
    color: rgb(73, 255, 255);
    text-decoration: none;
    font-size: 30px;
    padding: 6px 13px;
    font-family:Roboto;
    transition: 2s;
    margin-left: 135px;

    
}

.navbar ul li a:hover{
    background-color: rgb(167, 167, 167);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="üi.css">
    <title>Tech</title>
</head>
<body>
    <div  >
        <div >
            <img src="C:\Users\****\OneDrive\Masaüstü\tech\img\Tech.png">
            <ul>
                <li><a href="index.html">Ana Sayfa</a></li>
                <li><a href="ürünler.html">Ürünler</a></li>
                <li><a href="#">İletişim</a></li>
            </ul>            
        </div>