Primefaces: Not able to center align p:chart - css

Question

My xhtml code is
<p:outputPanel id="topperchartcont">
<p:outputPanel rendered="#{performanceStaffController.reportType == 'TP'}">
<table style="width: 100%">
<tr>
<td style="width: 10%">
</td>
<td style="width: 80%; text-align:center">
<h:panelGrid column="1">
<h:panelGroup style="width:80%; display:block; text-align:center">
<table style="border:1px solid #D8D8D8">
<tr>
<td style="text-align:center">
<p:chart type="bar" model="#{performanceStaffController.topperChartModel}"
rendered="#{performanceStaffController.topperChartModel != null}"
style="#{performanceStaffController.perfBean.chartWidth}"/>
</td>
</tr>
</table>
</h:panelGroup>
</h:panelGrid>
</td>
<td style="width: 10%">
</td>
</tr>
</table>
</p:outputPanel>
</p:outputPanel>
I also tried without the PanelGrid/PanelGroup
<p:outputPanel id="topperchartcont">
<p:outputPanel rendered="#{performanceStaffController.reportType == 'TP'}">
<table style="width: 100%">
<tr>
<td style="width: 10%">
</td>
<td style="width: 80%; text-align:center">
<table style="border:1px solid #D8D8D8">
<tr>
<td style="text-align:center">
<p:chart type="bar" model="#{performanceStaffController.topperChartModel}"
rendered="#{performanceStaffController.topperChartModel != null}"
style="#{performanceStaffController.perfBean.chartWidth}"/>
</td>
</tr>
</table>
</td>
<td style="width: 10%">
</td>
</tr>
</table>
</p:outputPanel>
</p:outputPanel>
I even tried other options like using div etc. but I am no way able to center align the p:chart inside that table-data, it is always left aligned. Please suggest how to center align it.
Note that there is no other problem with any of the components and the chart renders perfectly.

Answer 1

Try .center-block to make <p:chart> element's position center and .text-center to make inside text/elements center if any.
.center-block {
display:block;
margin-right:auto;
margin-left:auto;
}
.text-center {text-align:center}