垂直居中后将水平跨度居中

Question

After going through the long process of learning how to vertically centre a span in a div, at the end, my text content is no longer centered horizontally despite having set text-align: center. Also, very strangely to note, the horizontal centering DOES WORK only when the text within the span wraps to a second line.

enter code here

<div class="tier_blurb dh"> 
   <div class="blurb_title">
      <span>Assign ownership</span>
   </div>Engage your team to align business process responsibilities to their respective owners while performing initial cost benefits analysis on the business opportunities available</div>
</div>

.blurb_title {
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.95em;
    letter-spacing: -1px;
    margin-bottom: 10px;
    height: 43px;
    display: table-cell;
}

.blurb_title span {
    vertical-align: middle;
}

Answer 1

You need to define width attribute for .blurb_title because any table cell without specified width will get width of its content.

 .blurb_title { vertical-align: middle; text-align: center; text-transform: uppercase; font-weight: 700; font-size: 0.95em; letter-spacing: -1px; margin-bottom: 10px; height: 43px; display: table-cell; border: 1px solid green; width: 100vw; } 

 <div class="tier_blurb dh"> <div class="blurb_title"> <span>Assign ownership</span> </div>Engage your team to align business process responsibilities to their respective owners while performing initial cost benefits analysis on the business opportunities available</div> </div> 

Answer 2

You could use Flex-box:

.blurb_title {
    align-items: center;
    display: flex;
    vertical-align: middle;
}

Answer 3

请注意，如果未指定width属性或将其设置为100％，则中心对齐将不起作用

Answer 4

Follow the references CSS Flex-box and CSS Centering Things

You can also use CSS Flex-box (My Recommendation)

display: flex; align-items: center; justify-content: center;

 .blurb_title { border: 1px solid green; text-align: center; line-height: 50px; font-weight: bold; text-transform: uppercase; } 

 <div class="tier_blurb dh"> <div class="blurb_title"> <span>Assign ownership</span> </div> Engage your team to align business process responsibilities to their respective owners while performing initial cost benefits analysis on the business opportunities available </div>