Question

我想沿着方形父div的每个边缘居中4个小的方形子div。我目前的解决方案取决于黑客共同的绝对定位。 http://jsfiddle.net/Lrc4h/

Current div layout

HTML：

<div class="tile"> 
    <div class="tile_inner"></div>
    <div class="exit_left"></div>
    <div class="exit_right"></div>
    <div class="exit_up"></div>
    <div class="exit_down"></div>
</div>

CSS：

.tile {
    float: left;
    width: 180px;
    height: 180px;
    background-color: gray;
    border: 2px solid black;
}

.tile_inner {
    width: 120px;
    height: 120px;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid white;
}

.exit_left {
    position: absolute;
    top: 90px;
    width: 20px;
    height: 20px;
    border: 3px solid pink;
}

.exit_right {
    position: absolute;
    left: 165px;
    top: 90px;
    width: 20px;
    height: 20px;
    border: 3px solid red;
}

.exit_up {
    position: absolute;
    left:90px;
    top:10px;
    width: 20px;
    height: 20px;
    border: 3px solid blue;
}

.exit_down {
    position: absolute;
    left:90px;
    top:165px;
    width: 20px;
    height: 20px;
    border: 3px solid green;
}

如何让每个出口方向都沿着每个轴的边缘居中？

Answer 1

以下是更新的代码段：http://jsfiddle.net/Lrc4h/3/

首先，您需要知道，当您使用position: absolute时，元素将使用基于position: absolute或position: relative后退的第一个父级的绝对坐标进行定位如果没有，请到文件中。

其次，在处理像你的例子中的边界时，了解盒子模型以及当边界越过边界时讨厌的东西是多么重要;-)。通常的做法是使用box-sizing: border-box使事情变得更容易并且很好地混合相对和绝对单位。我已经在我发布的示例的顶部包含了一个盒子模型初始化我更喜欢它。

将所有这些组合在一起，您可以开始在绝对定位中使用相对单位（百分比）。我发布的示例仍然使用绝对位置，但相对于.tile元素。你应该总是相对于父母做出绝对的位置。使用left: 50%将元素的开头居中放置在父元素宽度的中心。但是，由于您的出口元素也有宽度，因此需要用它的一半宽度来补偿。这就是margin-left: -15px的原因。如果浏览器支持是IE9 +，您也可以使用calc函数。这看起来像这样：left：calc（50％ - 15px）。

正如您所看到的，示例仍然具有绝对位置，并且使用绝对定位可以轻松解决此问题。你仍然需要＆＃34;硬代码＆＃34;一些值，但它们都是相对于父级的，您可以轻松更改.tile维度而无需更改子元素。

干杯只园

Answer 2

.tile_inner {
  width: 120px;
  height: 120px;
  position: relative;
  top: 50%;
  left: 50%;
  margin: -60px 0 0 -60px;
  border: 1px solid white;
}

Answer 3

您只需要调整margin

即可

Demo

.tile_inner{
  margin: -60px 0 0 -60px;
}

Answer 4

可能不尽如人意，但您可以使用calc function将百分比与像素结合使用（基于子div的宽度和高度。例如（I＆＃39; m仅包括对CSS代码的更改：

.tile {
    position: relative;
}

.exit_left {
    top: calc(50% - 13px);
}

.exit_right {
    left: calc(100% - 26px);
    top: calc(50% - 13px);
}

.exit_up {
    left: calc(50% - 13px);
}

.exit_down {
    left: calc(50% - 13px);
    top: calc(100% - 26px);
}

这样，即使您更改了父div的维度，子div也将在适当的位置重新发送邮件。

演示：http://jsfiddle.net/xPP32/

Answer 5

这是稍微优化的版本，它依赖于伪元素和相对测量单位（％）。缩放这个是轻而易举的。您需要做的就是更改.tile上的高度和宽度，其余部分将由此处理。这是原始广场：http://jsfiddle.net/MGse6/。而且，这是一个正方形放大：http://jsfiddle.net/k9dxW/。

HTML：

<div class="tile"> 
    <div></div>
</div>

CSS：

*, :before, :after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    padding: 10px;
}

.tile {
    width: 180px;
    height: 180px;
    background-color: gray;
    border: 2px solid black;
    position: relative;
}

.tile > div {
    width: 65%;
    height: 65%;
    border: 1px solid #fff;
    margin: 17.5% auto 0;
}

.tile:before,
.tile:after, 
.tile > div:before,
.tile > div:after {
    content: "";
    position: absolute;
    width: 16%;
    height: 16%;
    border: 3px solid;
}

.tile:before {
    top: 0;
    left: 50%;
    margin-left: -8%;
    border-color: blue;
}

.tile:after {
    top: 50%;
    right: 0;
    margin-top: -8%;
    border-color: red;    
}

.tile > div:before {
    bottom: 0;
    left: 50%;    
    margin-left: -8%;
    border-color: green;
}

.tile > div:after {
    top: 50%;
    left: 0;
    margin-top: -8%;
    border-color: pink;
}

而且，这是使用流程排列元素的另一种解决方案：http://jsfiddle.net/xep9M/。

HTML：

<div class="tile">
    <!--
        It's very important 
        to have the divs stack 
        next to each other
    -->            
    <div></div><div></div><div></div><div></div><div></div>
</div>

CSS：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    padding: 10px;
}

.tile {
    width: 180px;
    height: 180px;
    background-color: gray;
    border: 2px solid black;
    box-sizing: content-box;
}

.tile > div {
    width: 16%;
    height: 16%;
    display: inline-block;
    border: 3px solid;
}

.tile > div:first-of-type, 
.tile > div:last-of-type {
    display: block;
    margin: 0 auto;
}

.tile > div:first-of-type {
    margin-bottom: 1.5%;
    border-color: blue;
}

.tile > div:last-of-type {
    margin-top: 1.5%;
    border-color: green;
}

.tile > div:nth-of-type(3) {
    height: 65%;
    width: 65%;
    border: 1px solid #fff;
}

.tile > div:nth-of-type(n + 2) {
    vertical-align: middle;
}

.tile > div:nth-of-type(2) {
    margin-right: 1.5%;
    border-color: pink;
}

.tile > div:nth-of-type(4) {
    margin-left: 1.5%;
    border-color: red;
}

如何在父div的每一侧居中div

5 个答案:

Demo