span居中的问题

Question

.panel-body span{
    display: block;
    letter-spacing:1px;
    margin: 2px 0;
    width:fit-content;
}
 .innerPanel{
    float: left;
    width: 25%;
    word-wrap: break-word;
    height: 150px;
}
.panelBody{
    padding: 0px;
}
.panel-heading{
    text-align: center;
}
.panel{
    margin-bottom: 0;
}
      

<div class="panel panelWrap panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">面板标题</h3>
    </div>
    <div class="panel-body panelBody">
        <div class="panel innerPanel panel-info" >
            <div class="panel-heading">
                <h3 class="panel-title">面板标题</h3>
            </div>
            <div class="panel-body">
                <span>这是一个基本的面板</span>
            </div>
        </div>
        <div class="panel innerPanel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">面板标题</h3>
            </div>
            <div class="panel-body">
                <span>这是一个基本的面板</span>
                <span>这是一个基本的面板</span>
                <span>这是一个基本的面板</span>
            </div>
        </div>
        <div class="panel innerPanel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">面板标题</h3>
            </div>
            <div class="panel-body">
                <span>这是一个基本的面板</span>
            </div>
        </div>
        <div class="panel innerPanel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">面板标题</h3>
            </div>
            <div class="panel-body">
                <span>这是一个基本的面板</span>
            </div>
        </div>
    </div>

    <div class="panel-heading">
        <h3 class="panel-title">面板标题</h3>
    </div>
    <div class="panel-body panelBody">
        <div class="panel innerPanel panel-info" >
            <div class="panel-heading">
                <h3 class="panel-title">面板标题</h3>
            </div>
            <div class="panel-body">
                <span>这是一个基本的面板</span>
            </div>
        </div>
        <div class="panel innerPanel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">面板标题</h3>
            </div>
            <div class="panel-body">
                <span>这是一个基本的面板</span>
                <span>这是一个基本的面板</span>
                <span>这是一个基本的面板</span>
            </div>
        </div>
        <div class="panel innerPanel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">面板标题</h3>
            </div>
            <div class="panel-body">
                <span>这是一个基本的面板</span>
            </div>
        </div>
        <div class="panel innerPanel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">面板标题</h3>
            </div>
            <div class="panel-body">
                <span>这是一个基本的面板</span>
            </div>
        </div>
    </div>
</div>

text-align:center 无效
想知道精准居中的办法

Answer 1

如果是块元素的水平居中只需要使用margin: 0 auto;

Answer 2

.panel-heading{
    display: flex;
    align-items: center;
    justify-content: center;
}

垂直水平居中