html - divの正確な中心に三角形を配置する方法

Question

div の正確な中心に三角形を配置しようとしていますが、できません。それはdivの中央に配置されますが、垂直ではなく水平方向に配置されますmargin: 0 auto;。結果。そして、私は理由を知りません！誰かが何か考えがありますか？display: table; margin: 0 auto;margin: 0 auto;display: inline-block;

私の簡単なコードは次のとおりです: jsfiddle.net/

Answer 1

いくつかのオプションがあります。

私のお気に入りは、外側の div に絶対位置を指定し、内側の 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
}