水平居中伪元素（形成为三角形）答案

【问题标题】：Horozontally center a pseudo element (formed as a triangle)水平居中伪元素（形成为三角形）
【发布时间】：2014-10-27 23:58:56
【问题描述】：

我正在尝试在 CSS 中创建一个“向下箭头”图形并将其水平居中。容器是全宽 (100%)。问题是我无法完美地将元素居中。知道如何实现吗？

h2:after{
    border-left: 32px solid transparent;
    border-right: 32px solid transparent;
    border-top: 24px solid #097fc2;
    content: "";
    display: block;
    height: 0;
    left: 48.4%;
    margin: auto;
    position: absolute;
    text-align: center;
    top: 53px;
    width: 0;
    z-index: 1;
}

您可以在“PROCEDURES”下看到一个工作示例here。

【问题讨论】：

标签： css pseudo-element css-shapes

【解决方案1】：

考虑使用以下 CSS。我使用left 移动项目，使其左边缘位于中心点，margin:0 0 0 -32px 将元素向左移动 32 像素（宽度的一半）。

h2:after{
    border-left: 32px solid transparent;
    border-right: 32px solid transparent;
    border-top: 24px solid #097fc2;
    content: "";
    display: block;
    height: 0;
    left: 50%;           /* Changed this */
    /* margin: auto;        Removed This */
    margin: 0 0 0 -32px; /* Added this */
    position: absolute;
    text-align: center;
    top: 53px;
    width: 0;
    z-index: 1;
}

.vc_custom_1414444458431 {
    margin-bottom: 0px !important;
    background-color: #097fc2 !important;
}
h2:after {
    border-left: 32px solid transparent;
    border-right: 32px solid transparent;
    border-top: 24px solid #097fc2;
    content:"";
    display: block;
    height: 0;
    left: 50%;
    /* Changed this */
    /* margin: auto;        Removed This */
    margin: 0 0 0 -32px;
    /* Added this */
    position: absolute;
    text-align: center;
    top: 53px;
    width: 0;
    z-index: 1;
}

<div class="vc_row wpb_row vc_inner vc_row-fluid vc_custom_1414444458431">
    <div class="vc_col-sm-12 wpb_column vc_column_container">
        <div class="wpb_wrapper">
            <div class="wpb_text_column wpb_content_element  procedures-title">
                <div class="wpb_wrapper">
                    	<h2 style="text-align: center;">PROCEDURES</h2>

                </div>
            </div>
        </div>
    </div>
</div>

【讨论】：