html - 在html和css中垂直和水平居中一个div在另一个div中

Question

我有一个发布文章的网站，我的问题是我在另一个未垂直和水平居中的 div 中有一个 div，现在它位于父 div 的顶部...我需要垂直和水平居中 div “作者”...

这是受此问题影响的一段 html 代码...

<div class="postcell">
  <div class="postshort75">21 Dicembre 2011 09:08:48 &#183; [Nel mondo, &egrave; Natale!]</div><div class="postshort25">Postato da</div>
  <div class="cleardiv"></div>
  <div class="postsxboxed"><div class="alignment">
  <a href="http://www.alecos.it/files/Natale2011.jpg" class="highslide" onclick="return hs.expand(this)"><img class="model" src="http://www.alecos.it/php/thumb.php?src=http://www.alecos.it/files/Natale2011.jpg&amp;x=420&amp;y=262&amp;f=0" align="left" style="margin: 5px 5px 5px 5px" alt="Immagine" title="Clicca Per Ingrandire"></a><span style="font-style: italic">In un mondo ogni giorno pi&ugrave; oscuro, pi&ugrave; frenetico, ingiusto e immorale, la speranza di un lieto futuro &eacute; la &quot;Luce&quot; che nasce a Natale. Solo &quot;Lui&quot; pu&ograve; incarnare l&#39;amore e irradiarlo in un mondo in declino, chi l&#39;accoglie trasforma il suo cuore e intraprende un pi&ugrave; giusto cammino. Un cammino che inizia dal nulla, da una semplice gelida grotta, da un &quot;Bambino&quot; in un&#39;umile culla, da una &quot;Santa&quot; magnifica notte. Ma prosegue per tutta la terra dove regna miseria ed orrore, dove soffiano venti di guerra, dove l&#39;odio sovrasta l&#39;amore, dove il debole invoca giustizia, l&#39;affamato non ha da mangiare, i bambini tra topi e sporcizia, tanti uomini a soffrire e pregare. Proprio qui s&#39;interrompe il cammino per infondere nuove speranze, per mutare a fratelli il destino accorciando inumane distanze. Che sia questo per tutti un dovere, il trionfo del bene sul male, Dio &eacute; &quot;Amore&quot; ma senza frontiere, dice il &quot;Bimbo&quot; che nasce a Natale.</span>
</div></div><div class="postdxboxed"><div class="author"><a href="mailto:alecos@alecos.it?subject=Diario:%20Nel%20mondo,%20&egrave;%20Natale!&amp;body=Gentile%20visitatore,%20La%20informo%20che%20messaggi%20offensivi%20o%20volgari%20verranno%20scartati,%20buona%20prosecuzione." class="hyperlink">Alessandro Marinuzzi</a><br><br><div class="srtgs" id="rt_50492"></div></div></div>
</div>

div 作者，正如你从这个截图中看到的，在顶部，我需要移动到父 div 的中间......

这是我的CSS...

/* Style Main Box Content */
.postcell {
  background-image: url("../bkg/Bkg_96.png");
  border: #6666FF 1px solid;
  box-shadow: 0 0 15px #888;
  width: 90%;
  margin: 0 auto;
  text-align: center;
  display: table;
}
/* Style Box Title Left (Topic) */
.postshort75 {
  font-family: Arial, Helvetica, FreeSans, 'Nimbus Sans L', sans-serif;
  font-size: 14px;
  font-style: normal;
  line-height: normal;
  font-weight: bold;
  font-variant: normal;
  color: #E6E6FA;
  background-image: url("../bkg/Bkg_115.jpg"); /* Barra Blue */
  background-color: #6666FF;
  border-bottom: #6666FF 1px solid;
  padding-top: 5px;
  padding-bottom: 5px;
  margin: 0 auto;
  vertical-align: middle;
  width: 75%;
  float: left;
  display: table-cell;
}
/* Style Box Title Right (Posted By) */
.postshort25 {
  font-family: Arial, Helvetica, FreeSans, 'Nimbus Sans L', sans-serif;
  font-size: 14px;
  font-style: normal;
  line-height: normal;
  font-weight: bold;
  font-variant: normal;
  color: #E6E6FA;
  background-image: url("../bkg/Bkg_115.jpg"); /* Barra Blue */
  background-color: #6666FF;
  border-bottom: #6666FF 1px solid;
  padding-top: 5px;
  padding-bottom: 5px;
  margin: 0 auto;
  vertical-align: middle;
  width: 25%;
  float: right;
  display: table-cell;
}
/* Style Box Post Left (Content of Article) */
.postsxboxed {
  border-right: #6666FF 1px solid;
  width: 75%;
  float: left;
  padding: 5px;
  display: table-cell;
  min-height: 90px;
}
/* Style Box Post Right (This Box contains div Author) */
.postdxboxed {
  border: none;
  width: 20%;
  margin: 0 auto;
  vertical-align: middle;
  float: right;
  padding: 5px;
  margin-right: 18px;
  display: table-cell;
  min-height: 90px;
}
/* Box Author Post */
.author {
  min-width: 200px;
  min-height: 90px;
  vertical-align: middle;
}

我该如何解决这个问题？任何帮助表示赞赏:)

Answer 1

您可以使用 display:flex 属性在 parent 内水平和垂直地居中 div .

将以下属性应用于要对齐的作者 div 的 parent。

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

更多关于 Flex Box

阅读有关 Flex 的更多信息 here

注意:flex 属性是特定于供应商的。您应该适当的供应商前缀才能工作