html - CSS Div Box WordPress 主题

Question

您好，我正在开发一个由其他开发人员制作的 wordpress 主题，他没有留下任何笔记或文档。我目前正在根据新要求编辑主题。我不是一个好的 css 人，我主要从事后端方面的工作。所以我需要一个 div 框或像这样的框:

那个半透明的黑盒子是我需要的，里面的文字:

我设法做了这样的事情:

但是我的盒子好像有点高，我能把它放在中间吗？另外，内容应为白色字体。到目前为止，这是我的代码:

<div class="about_area" id="about">
<div class="container">
    <div class="row">
        <div class="col-md-12 sec_headding text-center">
            <!-- <h1>
                <span></span><?php the_title(); ?><span></span>
            </h1> -->
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="col-md-12 aboutbox">
                <div class="about_content">
                    <h3 class="about_header">RED DELA CRUZ</h3>
                    <hr align="center"/>
                    <p class="lead"><?php the_field('subtitle'); ?></p>

                    <p><?php the_content(); ?></p>
                </div>
            </div>

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

您在框中看到的内容是由

生成的

<?php the_field('subtitle'); ?>

我的 CSS

.bxslider img{
    width:100%;
}
.about_area{
    padding-bottom:105px;
    background-color: #b0c4de;
    background-image: url('../images/about_bg.jpg');
}

.about_area .bx-wrapper .bx-viewport{
    margin-bottom: 20px;
}

.aboutbox {
    background-color: #000000;
    opacity: 0.6;
    position: relative;

}

.about_content {
    color: #FFFFFF;
}

.about_header {
    text-align: center;
    font-size: 33px;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #FFFFFF;
    margin: 1em 0;
    padding: 0;
    /*width: 820px;*/
    width: 60%;
    margin: 0 auto;
}

Answer 1

我认为您的意思是“如何使 div 水平居中”，您会找到很多关于前一个问题的解决方案:How to horizontally center a <div> in another <div>?

如果我错了而你的意思是别的，请告诉我。