Css 如何对齐<；p：面板>；垂直对中

在我的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>

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

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

注意，

左边距

值是

宽度

值的-1/2倍

结果：

如果

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>

结果：

即使不起作用，你也应该检查我在

中提供的关于
的链接。这就是我正在做的有6种方法，你应该混合它们




如果这不起作用，你可以用两个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}


分区中心容器
{ 
顶部：0；左侧：0；宽度：100%；高度：100%；
位置：绝对；显示：表格
}
div.centerContent{显示：表格单元格；垂直对齐：中间}

这也适用于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>


@Abhishek它应该，无论如何，可以用这种方式再次检查吗？是的，这种方式垂直对齐有效，但列出水平对齐。@Abhishek的问题是关于垂直对齐的，这就是为什么我没有列出。但现在您也可以将内容水平对齐。在我的情况下，宽度不是固定的，事实上，我将整个组件放在一个数据表中。所以宽度取决于内容。是否有解决方案，非常感谢您花时间解决此问题。非常感谢：）@Abhishek没关系，但那是我的最后一张照片，我想希望这能奏效，我能得到我的代言人：）
.centered {
position:relative;
height: 100px;
margin:0 auto;
padding: 10% 0;
}

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

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