如何将子 div 沿父 div 的每一侧居中

Question

我想将 4 个小的方形子 div 沿方形父 div 的每个边缘居中。我目前的解决方案依赖于黑客在一起的绝对定位。 http://jsfiddle.net/Lrc4h/

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

这里是更新的 sn-p：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)。

如您所见，该示例仍然具有绝对位置，并且使用绝对定位很容易解决此问题。您仍然需要“硬编码”一些值，但它们都与父元素相关，您可以轻松更改 .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 的宽度和高度。例如（我只包括更改到 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;
}