html - 如何将三角形居中在div的确切中心

Question

我试图在 div 的确切中心将三角形居中，但我做不到。它将自己定位在 div 的中间，但只是水平对齐而不是垂直。我做了margin: 0 auto;但仍然不起作用。我也尝试display: table; margin: 0 auto;过内部 div 给margin: 0 auto;外部 div ，但没有。我也尝试过display: inline-block;，没有结果。我不知道为什么！有人有什么想法吗？

我的简单代码是： jsfiddle.net/

Answer 1

选项很少。

我最喜欢的是给外部 div 一个绝对位置，给内部一个相对位置，然后使用 top:50% 垂直定位。您还需要添加三角形高度一半的负边距，因为 top:50% 将使三角形顶部居中而不是中间。

#main_content {
    width: 300px;
    height: 300px;
    background-color: red;

    position: absolute;
}


#container {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 25px 43.3px 25px 0;
    border-color: transparent #007bff transparent transparent;

    position: relative;
    top:50%;
    margin:  -21.65px auto; //Half the height of your triangle
}

Answer 2

您可以设置 main_content 的 display:table-cell ，然后使用 vertical-align: middle;

#main_content {
    width: 300px;
    height: 300px;
    background-color: red;
    display: table-cell;
    vertical-align: middle;
}