每当浏览器窗口缩小时，div就会向右移动

Question

只是练习css下拉列表。在下面的代码中，.container div（蓝色的一个）包含子下拉列div .dropdown（绿色的一个，我已禁用此颜色以避免混淆）。容器div与上面的div .content-small（红色的）完全水平对齐。因为每当我缩小浏览器窗口时，我都希望保留所有div的位置和边距，所以我使用了left: 41.66%;百分比，以便容器div保持与其顶部红色div对齐。

容器div保持对齐，但每当窗口缩小到最小尺寸时，容器div会轻微向右移动。请看附带的截图。那是为什么？

*{
  box-sizing:border-box;
}

html,body {
  margin: 0px;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
  background-color: rgba(0,0,0,1);
  padding: 0px;
}

a {
  color: rgba(0,0,0,1);
  text-decoration: none;		
}

a:hover {
  color: rgba(0,0,255,1);	
}

.wrapper {
  height: 600px;
  max-width: 960px;
  margin-left: auto;
  left: 0px;
  top: 0px;
  background-color: rgba(204,204,204,1);
  margin-right: auto;
  position: relative;
  padding: 0px;
  margin-top: 0px;
}

.content {
  position: relative;
  box-sizing: border-box;
  height: 100%;
  max-height: 200px;
  max-width: 600px;
  background-color: #FFF;
  margin-right: auto;
  margin-left: auto;
  margin-top: 0px;
  left: 0px;
  right: 0px;
  font-size: 32px;
  text-align: center;
  border: 3px solid rgba(0,0,0,1);
  border-radius: 15px 15px 0px 0px;
  width: 100%;
}

.content-small {
  max-width: 100px;
  height: 100%;
  max-height: 50px;
  background-color: rgba(255,0,0,1);
  position: relative;
  margin-right: auto;
  margin-left: auto;
  border: 3px solid rgba(0,0,0,1);
  top: 5px;
  margin-top: 10px;
}

.content-small:hover + .container, .container:hover{
  visibility: visible;	
}

.container{
  visibility: visible;
  height: 100px;
  max-width: 100px;
  background-color: rgba(204,102,255,1);
  position: absolute;
  left: 41.66%;
}

.dropdown {
  /* [disabled]background-color: rgba(0,255,0,1); */
  /* [disabled]border: 3px solid rgba(255,0,0,1); */
  width: 100px;
  height: 100%;
  max-height: 50px;
  position: relative;
  margin-right: auto;
  margin-left: auto;
  top: 3px;
}
	

<div class="wrapper">
    <div class="content">
        <div class="content-small">Home</div>
      <div class="container">
        <div class="dropdown"></div>
        </div>
    </div>
</div>

Answer 1

那是因为你说left: 41.66%;，这不是一个准确的中心方式。相反，使用这个：

<强> CSS

.container {
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

＆＃13;

＆＃13;

*{
    box-sizing:border-box;
}

html,body {
	margin: 0px;
	height: 100%;
	width: 100%;
	left: 0px;
	top: 0px;
	background-color: rgba(0,0,0,1);
	padding: 0px;
    }

a {
	color: rgba(0,0,0,1);
	text-decoration: none;		
}

a:hover {
	color: rgba(0,0,255,1);	
}





.wrapper {
	height: 600px;
	max-width: 960px;
	margin-left: auto;
	left: 0px;
	top: 0px;
	background-color: rgba(204,204,204,1);
	margin-right: auto;
	position: relative;
	padding: 0px;
	margin-top: 0px;
}


.content {
	position: relative;
	box-sizing: border-box;
	height: 100%;
	max-height: 200px;
	max-width: 600px;
	background-color: #FFF;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	left: 0px;
	right: 0px;
	font-size: 32px;
	text-align: center;
	border: 3px solid rgba(0,0,0,1);
	border-radius: 15px 15px 0px 0px;
	width: 100%;
}

.content-small {
	max-width: 100px;
	height: 100%;
	max-height: 50px;
	background-color: rgba(255,0,0,1);
	position: relative;
	margin-right: auto;
	margin-left: auto;
	border: 3px solid rgba(0,0,0,1);
	top: 5px;
	margin-top: 10px;
}

.content-small:hover + .container, .container:hover{
	visibility: visible;	
}
.container{
	visibility: visible;
	height: 100px;
	max-width: 100px;
	background-color: rgba(204,102,255,1);
	position: absolute;
	margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
}

.dropdown {
	/* [disabled]background-color: rgba(0,255,0,1); */
	/* [disabled]border: 3px solid rgba(255,0,0,1); */
	width: 100px;
	height: 100%;
	max-height: 50px;
	position: relative;
	margin-right: auto;
	margin-left: auto;
	top: 3px;
}

＆＃13;

<div class="wrapper">
    <div class="content">
        <div class="content-small">Home</div>
      <div class="container">
        <div class="dropdown"></div>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

JSFiddle