Question

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

我用过：

top: 50%
left: 50%

尝试将我的箭头div放在我的圆圈div中心，但当然这只是我的箭头div的左上角，而不是中心位置。

如何将div完美地放在div中？理想情况下，我喜欢这样的解决方案，其中两个div的宽度和高度无关紧要，因此我可以在以后轻松更改它们。

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

Answer 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/

P.S。

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

Answer 2

如果您希望能够使具有未知尺寸的元素居中，则可以对该元素使用转换（translate）。

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/

请注意，这仅适用于现代浏览器。

Answer 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;

}

Answer 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%

    }

Answer 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 */
}

Answer 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%;
}

Answer 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/这样的东西，但在这种情况下你应该计算三角形的几何位置而不是设定边距。

使用CSS在DIV上居中DIV

7 个答案: