Question

我目前正试图在div中居中几个小时：

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

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

但它没有用。

感谢。

Answer 1

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

如果您需要彼此标题，那么inline-block是最简单的答案。

＆＃13;

div {
  text-align:center;
  }

.aligned h1, .aligned h2 {
  display:inline-block;
  }

＆＃13;

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

＆＃13;

Answer 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/

Answer 3

这是代码

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

在div css中心几个小时

3 个答案: