使用 CSS 在 DIV 上居中 DIV答案

【问题标题】：Center DIV on DIV with CSS使用 CSS 在 DIV 上居中 DIV
【发布时间】：2014-08-31 15:20:42
【问题描述】：

我正在尝试在 CSS 中创建一个非常简单的按钮，但无法让按钮中的箭头位于我的圆圈中心。

我用过：

top: 50%
left: 50%

尝试将我的箭头 div 居中在我的圆形 div 内，但当然这只会使我的箭头 div 的左上角居中，而不是中心位置。

如何让我的 div 在 div 内完美居中？理想情况下，我想要一个解决方案，其中两个 div 的宽度和高度都无关紧要，因此我可以在以后轻松更改它们。

我当前的代码： http://jsfiddle.net/zhWGx/

【问题讨论】：

jsfiddle.net/zhWGx/3

标签： html css button center

【解决方案1】：

试试这个，把你的三角形设为position:absolute，然后上、左下、右为0。设为margin:auto。然后你就完成了。

.triangle
{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-color: transparent transparent transparent red;

    position: absolute;
    top: 0;
    left: 0;
    right:0;
    bottom:0;
    margin:auto;
}

链接：http://jsfiddle.net/Vigiliance/zhWGx/4/

附言

当你使用这种方法时，你会诅咒 IE。

【讨论】：

【解决方案2】：

如果您希望能够将未知尺寸的元素居中，您可以在该元素上使用转换（平移）。

transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);

http://jsfiddle.net/zhWGx/23/

请注意，这仅在现代浏览器上受支持。

【讨论】：

确实，只要您不需要支持 Internet Explorer 7 和 8，这是一个简单的解决方案，并且适用于各种情况。

【解决方案3】：

如果您的圈子始终大小相同，您可以试试这个：http://jsfiddle.net/zhWGx/1/

.triangle
{
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 17.3px;
border-color: transparent transparent transparent #ffffff;

position: relative;
display: block;
margin: 10px auto ;
top: 10px;

}

【讨论】：

【解决方案4】：

这应该可以解决它

  .triangle
    {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 10px 0 10px 17.3px;
        border-color: transparent transparent transparent #ffffff;
        background:linear-gradient(transparent, transparent, transparent, #FFFFFF);
        position: relative;
        margin-left: 15px;
        top:24%

    }

【讨论】：

【解决方案5】：

http://jsfiddle.net/Oliboy50/zhWGx/14/

如果您想按照自己的方式调整三角形位置：

.triangle
{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 17.3px;
    border-color: transparent transparent transparent #ffffff;

    position: absolute; /* absolute (the parent is relative) */
    top: 50%;
    left: 50%;
    margin-top: -10px; /* triangle height/2 */
    margin-left: -6px; /* triangle width/2 (6.85px) or what you want */
}

【讨论】：

【解决方案6】：

你可以试试：

.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 17.3px;
border-color: transparent transparent transparent #ffffff;
position: relative;
top: 25%;
left: 40%;
}

【讨论】：

【解决方案7】：

如果你的 div 中只有文本，你可以这样做：

.inside-div {
  display: inline: // for IE
  display: inline-block;
  text-align: center;
}

否则：

.parent-div {
  position: relative;
}
.inside-div {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 500px;
  margin-left: -250px;
  height: 500px;
  margin-top: -250px;
}

类似http://jsfiddle.net/zhWGx/27/，但在这种情况下，您应该计算三角形的几何位置，然后设置边距。

【讨论】：