html - 居中基于百分比的 div

Question

但是我的尝试没有结果。我不太明白那个问题的答案是如何有意义的，或者如何用 100% 的宽度来做。基本上我有一个动态呈现的页面，它有两个 div - 都设置为 100% 宽度和 100% 高度，以便捕获整个输出。因此，如果两个 div 的长度不同，我想将 div 居中到身体：

<body>
  <div id="first">Longer Name</div>
  <div id="second">Name</div>
</body>

电流输出：

OUTPUT LONGER
OUTPUT SHORT

期望的输出：

OUTPUT LONGER
    OUTPUT SHORT

div CSS：

height: 100%;
position: relative;
width: 100%;

正文 CSS：

margin: 0;
padding: 0;

由于输出的动态特性，需要基于百分比的 div。

编辑

我应该明确表示输出是大量的表格。我举的例子是为了展示我希望它如何居中。输出不是文本。基本上一个表格的宽度可能是 120 像素，我需要将它放在正文中（这将是较长 div 的宽度，可能是 1500 像素）。

score 2 · Accepted Answer

2

#first, #second { text-align: center; }

于 2012-10-10T19:55:53.960 回答

score 0 · Accepted Answer

当您使用 % 宽度时，您的网站是灵活的，当您希望所有 div 居中时，您使用此代码，此代码对任何元素内容有用，将在您的任何站点位置居中

#first, #second{    
  width:100%;
  text-align:center;
 }

最好的祝福

score 0 · Accepted Answer

您可以使用这种 css：

#mydiv{
position:fixed;
padding:0px;

z-index: 101;
top:50%;
left:50%;
transform: translate(-50%, -50%); /*what you actually need to center*/

width: 80%;
height: 80%;
background:rgba(0,0,0,1);
display: none;
border:1px solid #d2d2d2;
}

html - 居中基于百分比的 div

3 回答 3

Related

Reference