求助：基于Twitter Bootstrap用表格单元格法实现Div垂直居中失败

Hey there, let's get that vertical centering working for you! I noticed a couple of key issues in your code that are preventing the single-slider div from centering properly. Here's what's going wrong and how to fix it:

1. Typos in Class Names #

First off, you've got mismatched class names between your CSS and HTML:

• CSS uses .silder-inner and .single-silder, but your HTML uses slider-inner and single-slider (note the correct spelling of "slider" instead of "silder"). These typos mean your CSS styles aren't being applied to the right elements at all!

2. Missing Parent Element Height #

Your .slider-area has height: 100%, but percentage-based heights only work if the parent elements (including <html> and <body>) have an explicit height set. Without this, .slider-area won't actually take up the full viewport height, so the table-cell centering has no space to work with.

Fixed Code #

Here's the corrected version of your code with these issues addressed:

CSS #

/* Add this to ensure full viewport height */
html, body {
  height: 100%;
  margin: 0; /* Remove default body margin */
}

.slider-area {
  height: 100%;
  width: 100%;
}

.slider-inner { /* Fixed typo */
  height: 100%;
  display: table;
  width: 100%; /* Add width to ensure table takes full space */
}

.single-slider { /* Fixed typo */
  height: auto;
  display: table-cell;
  vertical-align: middle;
}

HTML #

<div class="slider-area">
  <div class="slider-inner"> <!-- Fixed typo -->
    <div class="single-slider"> <!-- Fixed typo -->
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <h3>Holla You'r Welcome</h3>
            <h2>Best <span>Digital Agency</span> &amp;<br>Business Farm</h2>
            <a href="" class="btn custom-btn slider-btn">Contract Now</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

How This Works #

• By setting html, body { height: 100%; }, we give .slider-area a proper height reference so it fills the entire viewport.
• Fixing the class name typos ensures your CSS styles are applied to the correct elements.
• Adding width: 100% to .slider-inner makes sure the table element takes up the full width of its parent, so the table-cell content centers properly across the screen.

This should get your content vertically centered exactly how you want it!

内容的提问来源于stack exchange，提问作者Md. Shamim Mia