居中 div 元素而不考虑屏幕尺寸

Question

我已经使用 flexbox 来尝试这个，但由于某种原因它不起作用。在较小的屏幕尺寸上，一切都居中。我试着做 justify-content: center for flexbox，但那不起作用。我将放下代码片段以及显示我所看到内容的屏幕截图。您可能会查看代码片段，但它使用了百分比和像素的组合，因此看起来可能很奇怪。我可以在没有媒体查询的情况下处理简单的居中吗？即使我确实使用了一个，我仍然无法将其置于桌面中心。

html {
 height: 100%;
}




body{
 height: 100%;
 margin: 0;
 font-family: courier;
 font-size: 19px;
}


#container {

 min-height: 100%;
 margin-bottom: -150px;
 width: 100%;


}

#container:after {

 content: "";
 display: block;
}

#content{
 display:flex;
 float:left;
 width: 800px;
 flex-wrap: wrap;
 justify-content: center;

 

}


#footer, #container:after{

 height: 150px;
}


#footer{

 background-color: #006699;
 clear: both;
}

.wrap {
 margin: 0 auto;
 width: 100%;
 display: flex;
 align-items: center;
 flex-wrap: nowrap;
}

.sub {

 padding: 12px;
 width: 32%;
 height: 120px;
 color: white;
 border-right: solid white 1px;
}

.sub:last-child{

 border: 0px;
}




#leftbar{

 width: 10%;
 height: calc(100vh - 150px);
 background-color: black;
 float:left;


}

#rightbar{
 width: 10%;
 height: calc(100vh - 150px);
 background-color: black;
 float: right;

}

#nav {
  list-style: none;
  font-weight: bold;
  width: 100%;
  text-align: center;
  background: rgba(0, 102, 153, 0.4);
  height: 100px;



}

#nav ul {
  list-style-type: none;
  margin: 0px;
  padding: 0;
  overflow: auto;
 //  background-color: #006699; 
  text-align: center;
}
#nav li {
  margin: 0px;
  display: inline-block;

}
#nav li a {
  padding: 10px;
  display: inline-block;
  text-decoration: none;
  font-weight: bold;
  font-size: 30px;
  color: white;
 // background-color: #006699;


}
#nav li a:hover {
  color:  white;
  text-shadow: 2px 2px 4px white;
}

.clear {

clear: both;

}




div.img {
 margin: 5px;
 border: 1px solid #595959;
 float: left;
 width: 180px;



}

div.img:hover{

 border: 1px solid #b3b3ff;
}

div.img img {
 width: 100%;
 height: auto;
}

div.desc{
 padding: 15px;
 text-align: center;
}

div.head{

 text-align:center;
 background-color:black;
 color: orange;

}

<!DOCTYPE HTML>
<html>
<head lang="en">

 <link rel="stylesheet" type="text/css" href="new.css" />
 <meta charset="UTF-8">
 <title></title>
 
 <style>
 
 </style>
 <script>
 
 </script>
 
</head>

<body>

<div id="container">

<div id="nav">

<ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Works</a></li>
 <li><a href="#">About</a></li>
</ul>


 </div>

 <div class="clear"></div>


<div class="upperbox">

<div id="leftbar"> </div>

<div id="rightbar"></div>


<div id="content"> 

<div class="img">
 <div class="head">Color Palettes</div>
 <img src="purple.png" alt="the color purple">
 <div class="desc">Color</div>

</div>

<div class="img">
 <div class="head">Color Palettes</div>
 <img src="blue.png" alt="the color blue">
 <div class="desc">Color</div>

</div>


<div class="img">
 <div class="head">Color Palettes</div>
 <img src="yellow.png" alt="the color yellow">
 <div class="desc">Color</div>

</div>

<div class="img">
 <div class="head">Color Palettes</div>
 <img src="brown.jpg" alt="the color yellow">
 <div class="desc">Color</div>

</div>

<div class="img">
 <div class="head">Color Palettes</div>
 <img src="grey.jpg" alt="the color yellow">
 <div class="desc">Color</div>

</div>

<div class="img">
 <div class="head">Color Palettes</div>
 <img src="green.png" alt="the color yellow">
 <div class="desc">Color</div>

</div>

<div class="img">
 <div class="head">Color Palettes</div>
 <img src="red.png" alt="the color yellow">
 <div class="desc">Color</div>

</div>

<div class="img">
 <div class="head">Color Palettes</div>
 <img src="gold.jpg" alt="the color yellow">
 <div class="desc">Color</div>

</div>

</div>

</div>










</div>


<div id="footer">
 <div class="wrap">
  <div class="sub">Lorem Ipsum</div>
  <div class="sub">Lorem Ipsum </div>
  <div class="sub">Lorem Ipsum </div>
 </div>
</div>
 
 
 
 


 </body>
 
 </html>

Answer 1

你可以给你的 #content margin: 0 auto; 的 CSS，像这样:

#content {
  margin: 0 auto;
}

（也许你还需要不要它向左浮动）

或者您可以查看其他现代居中元素的可能性：

https://css-tricks.com/centering-percentage-widthheight-elements/
https://css-tricks.com/centering-in-the-unknown/
https://codemyviews.com/blog/how-to-center-anything-with-css

Answer 2

从 #content 中删除 float:left; 并添加 margin: 0 auto。

居中 div 元素而不考虑屏幕尺寸

Centering div elements disregarding screen size

html

css

centering

flexbox