在 div css 中居中几个 h答案

【问题标题】：Center several h inside div css在 div css 中居中几个 h
【发布时间】：2015-04-20 20:13:57
【问题描述】：

我目前正在尝试在一个 div 中将几个 h 居中：

<div>
  <h1>Title</h1>
  <h2>Subtitle</h2>
</div>

关键是，我的 div 的大小可以改变。我怎样才能在 css 中实现这一点？我已经找到了一些关于这个主题的主题：Center a H1 tag inside a DIV

但一直没用。

谢谢。

【问题讨论】：

垂直和水平或只是水平？

标签： css centering

【解决方案1】：

这里是代码

.block{
    /* decor */
    padding:0 20px;
    background:#666;
    border:2px solid #fff;
    text-align:center;
    /* important */
    min-height:220px;
    width:260px;
    white-space:nowrap;
}
.block:after{
    content:'';
    display:inline-block;
    height:220px; /* the same as min-height */
    width:1px;
    overflow:hidden;
    margin:0 0 0 -5px;
    vertical-align:middle;
}
.block .centered{
    vertical-align:middle;
    display:inline-block;
    white-space:normal;
}

<div class="block">
  <div class="centered">
    
    <h1>Title</h1>
  <h2>Subtitle</h2>
    </div>
</div>

【讨论】：

【解决方案2】：

垂直居中元素的最佳方法之一是使用表格/表格单元格行为，例如：

div {
    width: 300px;
    height: 300px;
    background-color: #eee;
    display: table;
}
h1 {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

水平方向，只需使用 text-align: center :)

http://jsfiddle.net/Pik_at/06d5aLqd/

【讨论】：

只需将标题放入
之类的元素中，然后给他表格单元格的行为；）更新：jsfiddle.net/Pik_at/06d5aLqd/1
更改 HTML 使这变得容易，但在某些情况下你不能（你的 HTML 来自外部源，你不能改变它）......不清楚它是否是对OP的要求与否。顺便说一句，将其添加到您的答案中，否则只有一半正确

【解决方案3】：

不清楚居中是什么意思，但text-align:center 会将分机居中。

如果您需要将标题 next 放在一起，那么inline-block 是最简单的答案。

div {
  text-align:center;
  }

.aligned h1, .aligned h2 {
  display:inline-block;
  }

<div>
  <h1>Title</h1>
  <h2>Subtitle</h2>
</div>

<div class="aligned">
  <h1>Title</h1>
  <h2>Subtitle</h2>
</div>

【讨论】：