Html 在引导中垂直对齐？_Html_Css_Twitter Bootstrap_Vertical Alignment

Html 在引导中垂直对齐？

html css twitter-bootstrap

Html 在引导中垂直对齐？,html,css,twitter-bootstrap,vertical-alignment,Html,Css,Twitter Bootstrap,Vertical Alignment,我在一个小网站上工作，我似乎不知道如何将我的名字垂直居中。我把CSS放在HTML文件中，这样你就可以看到我正在做的一切。提前谢谢 <head> <title>Test</title> <style> section { height: 100vh; } .test1 { background: grey; } .name { border: 3px solid white;

我在一个小网站上工作，我似乎不知道如何将我的名字垂直居中。我把CSS放在HTML文件中，这样你就可以看到我正在做的一切。提前谢谢

<head>
 <title>Test</title>
 <style>
   section {
     height: 100vh;
   }
   .test1 {
     background: grey;
   }
   .name {
     border: 3px solid white;
     color: white;
     padding: 25px 0;
     width: 35%;
   }
 </style>
</head>
<body>
  <section class="test1">
    <div class="container">
      <div class="row">
        <h1 class="text-center name center-block">Dylan Bailey</h1>
      </div>
    </div>
 </section>
</body>

使用属性高度和线条高度两者的值应该相同，这将对齐中间的数据：

如果页面上只有一个元素，这应该是您所需要的全部。您还必须删除h1标记设置的默认边距

身体{ 背景：灰色；宽度：100%；身高：100%； } h1.name{ 边框：3倍纯白；颜色：白色；填充：25px；保证金：0；文本对齐：居中；位置：绝对位置；最高：50%；左：50%； -webkit转换：翻译-50%，-50%； -ms转换：翻译-50%，-50%；转化：转化-50%，-50%； }

Dylan Bailey如果页面上只有一个元素，那么这应该是您所需要的全部内容。您还必须删除h1标记设置的默认边距

Dylan Bailey只需使用bootstrap附带的网格即可。不需要CSS

<body>
<section class="test1">
<div class="container">
  <div class="row">
    <div class="col-md-4 col-md-offset-4">
        <h1 class="text-center name">Dylan Bailey</h1>
      </div>
  </div>
</div>
</section>
</body>

只需使用引导附带的网格。不需要CSS

<body>
<section class="test1">
<div class="container">
  <div class="row">
    <div class="col-md-4 col-md-offset-4">
        <h1 class="text-center name">Dylan Bailey</h1>
      </div>
  </div>
</div>
</section>
</body>

很好的解决方案。非常感谢：没问题，很高兴我能帮忙。很好的解决方案。非常感谢：没问题，很高兴我能帮忙。