html - 如何让我的标签从中间打开，而不是从左边打开？

Question

我正在尝试在我的站点中设置一个 Pane ，该 Pane 将从中心打开并在加载后逐渐打开。我已将其设置为执行此操作，但它从标签开始的左侧开始，而不是从我希望它开始的中心开始。如何从中心开始？

我已经尝试将它对齐到中心并从那里进行调整，但它似乎对我的定位来说效果不够好。

#cBox{
	position: absolute;
	margin-left: 10%;
	margin-top: -.5%;
	margin-bottom: -1%;
	height: 100%;
	width: 80%;
	border-right: 3px ridge;
	border-left: 3px ridge;
	border-color: #A17500;
	background-image: linear-gradient(to bottom, transparent, black);	
	overflow-y: scroll;
	animation: open 1s;
}
@keyframes open {
	0% {width: 0%}
	100% {width: 80%;}
}

<div id="cBox">
</div>

Answer 1

您可以添加一个 left，它在同一动画中起作用，因此随着宽度的扩大，左侧会缩小。

由于您已经在处理 margin-left:10%，我已经开始 left:40% 并以 left:0< 结束 补偿...

#cBox{
  position: absolute;
  margin-left: 10%;
  margin-top: -.5%;
  margin-bottom: -1%;
  height: 100%;
  width: 80%;
  border-right: 3px ridge;
  border-left: 3px ridge;
  border-color: #A17500;
  background-image: linear-gradient(to bottom, transparent, black);	
  overflow-y: scroll;
  animation: open 1s;
  left: 0;
}
@keyframes open {
  0% {width: 0%; left: 40%;}
  100% {width: 80%; left: 0; }
}

<div id="cBox">
</div>