Question

我试图将一个三角形置于div的确切中心，但我无法做到。它将自己定位在div的中间，但只是在水平对齐而不是垂直我做了margin: 0 auto;但仍然无法工作。我也在内部div上尝试了display: table; margin: 0 auto;给了外部div margin: 0 auto;，但没有。我也试过{{1}没有结果。我不知道为什么！有人有任何想法吗？

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

Answer 1

选项很少。

我最喜欢的是给外部div一个绝对位置，给内部一个相对位置，然后使用top：50％垂直定位。您还需要添加三角形高度的一半的负边距，因为顶部：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

您可以设置display：table_ cell of main_content，然后使用vertical-align：middle;

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

如何将三角形置于div的正中心

2 个答案: