Question

我刚刚开始学习CSS，我想在边缘上创建两个div，并在类中将其称为Wide，我想将其居中，因此我将其位置设为绝对，左：50％，但它不起作用

.container{
    background-color:#6699;
    width: 900px;
    height:600px;
    margin:20px auto;
    position: relative
}

.tall{
    background-color:#993399;
    width: 200px;
    height:100%;
    float: right
}

.wide{
    background-color:#6600cc;
    width:200px;
    height:200px;
    position: absolute;
    left:50%
}


.tall2{
    background-color:#006699;
    width:200px;
    height:100%;
}

<!DOCTYPE html>
<head> 
    <link rel="stylesheet" href="float.css">
</head>
<body>
    <div class="container">
        <div class="tall"></div>
        <div class="wide"></div>
        <div class="tall2"></div>
        
    </div>
</body>

Answer 1

尚不清楚您要做什么，但是很有可能41640.5或flex布局会更好地为您服务。对于这样的布局，浮动通常不再是最佳实践。

您可以尝试这样的事情：

grid

Answer 2

如果您要水平对齐“宽” div，则可以向div中添加一个变换，如下所示：

.wide{
    background-color:#6600cc;
    width:200px;
    height:200px;
    position: absolute;
    left:50%;

    /* Over Here */
    transform: translateX(-50%);
}

Answer 3

可以使用display: table;，display: table-row和display: table-cell样式完成。

.container {
  background-color: #6699;
	width: 100%;
}

.tall {
  background-color: #993399;
}

.wide {
  background-color: #6600cc;
	width: auto;
}

.tall2 {
  background-color: #006699;
}

.table {
  display: table;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
}

.tall,
.tall2 {
  width: 200px;
}

* {
  height: 100%;
}

<!DOCTYPE html>

<head>

</head>

<body>
  <div class="table container">
    <div class="row">
      <div class="cell tall"></div>
      <div class="cell wide"></div>
      <div class="cell tall2"></div>
    </div>
  </div>

</body>

为什么div不在两个div之间居中

3 个答案: