Question

目前我正在制作一个页面，其中我有4个div，每个div占据50％的宽度和高度。我想创建一个div，其中一个框可以浮动在页面的正中心，与这些元素重叠。到目前为止，这是编码。

    <html>
<head>
</head>
<body>

<div style="background-color:red; width:50%; height:50%; float:left">
</div>

<div style="background-color:blue; width:50%; height:50%; float:right">
</div>

<div style="background-color:green; width:50%; height:50%; float:left">
</div>

<div style="background-color:orange; width:50%; height:50%; float:right">
</div>

</body>
</html>

Answer 1

绝对定位似乎是最明显的解决方案。

＆＃13;

html,
body {
  height: 100%;
  position: relative;
}
.center {
  width: 50%;
  height: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #663399;
}

＆＃13;

<div style="background-color:red; width:50%; height:50%; float:left"></div>
<div style="background-color:blue; width:50%; height:50%; float:right"></div>
<div style="background-color:green; width:50%; height:50%; float:left"></div>
<div style="background-color:orange; width:50%; height:50%; float:right">
  <div class="center"></div>
</div>

＆＃13;

Answer 2

我认为你应该尝试绝对定位。这是另一个问题，有人问如何集中弹出对话。与你正在做的相似。 How to design a CSS for a centered floating confirm dialog? 看看Steve Robbins和Cristian Toma提供的答案。我认为那些可能对你有帮助。

具有浮动中间元素的四个等边框

2 个答案: