css - 如何对齐内容垂直居中对齐

Question

在我拥有的 JSF-PrimeFaces webapp 中，我需要将其内容垂直对齐到中心。我怎样才能做到这一点？

<p:panel id="businesses_panel" header="#{business.businessName}" styleClass="mini-panel panel-grid tr panel-grid td panel-hover panel-header-title-small">
<div align="center">
    <p:panelGrid columns="1">
        <div class="component-spacing-top"/>
        <h:graphicImage alt="#{business.businessName}" value="#{business.logoFullPath}" class="small-panel-image" />
        <div class="component-spacing-top"/>
    </p:panelGrid>
</div>

Answer 1

<p:panel style="height:500px;position:relative;"/>
    <p:panelGrid columns="1" styleClass="centered">
        <div class="component-spacing-top"/>
        <h:graphicImage alt="#{business.businessName}" value="#{business.logoFullPath}"    class="small-panel-image" />
        <div class="component-spacing-top"/>
    </p:panelGrid>
</p:panel>

height值是随机给出的没关系，但不要擦除position:relative。

.centered {
position: absolute;
height: 100px;
top: 0;
bottom: 0;
margin:auto;
}

对于水平，您应该添加以下规则：

left:50%;margin-left:-100px;width:200px;

注意，margin-leftvalue 是 value 的 -1/2 倍width。

结果：

如果width未修复，您可以尝试这种方式，它适用于我并同时水平和垂直对齐它：

<p:panel style="line-height:200px;padding: 5% 0;position: relative;"/>
    <p:panelGrid columns="1" styleClass="centered">
        <div class="component-spacing-top"/>
        <h:graphicImage style="vertical-align:middle;" alt="#{business.businessName}" value="#{business.logoFullPath}"    class="small-panel-image" />
        <div class="component-spacing-top"/>
    </p:panelGrid>
</p:panel>

请注意，graphicImage 也具有style属性。

.centered {
position:relative;
height: 100px;
margin:0 auto;
padding: 10% 0;
}

结果：

即使不起作用，您也应该检查我在里面提供的链接about。这就是我正在做的，有 6 种方法，你应该混合它们。

• 关于
• 演示

Answer 2

如果这不起作用，您可以用 2 个 div 包装它。想法是让这两个 div 中的任何元素都表现得像一个表格，具体来说是 td。

<div class="centerContainer">
   <div class="centerContent">
      <panel...>
      </panel>
   </div>
</div>

div.centerContainer
{ 
   top: 0; left: 0; width: 100%; height: 100%;
   position: absolute; display: table
}

div.centerContent {display: table-cell; vertical-align: middle}

这也适用于 primefaces 布局！

<p:layout fullPage="true">
   <!-- Header -->
   <!-- Footer -->

   <!-- Mid Content --> 
   <p:layoutUnit position="center">
      <div class="centerContainer">     
         <div class="centerContent">         
            <ui:insert name="content"></ui:insert>
         </div>
      </div>            
   </p:layoutUnit>
</p:layout>