How render form at the center

Question

I have facelet 1.xhtml with the following

<h:form id="frm">
    ...
</h:form>

How render this form at the center of screen entirely?

@peeskillet No, i dont about CSS nothink. Can you give an example? — , Nov 30 '13 at 06:45

score 3 · Accepted Answer · edited May 23 '17 at 10:31

<h:head>
    <h:outputStyleSheet library="css" name="stylesheet.css/>
</h:head>   

<div id="formdiv">    
    <h:form id="frm">
        ...
    </h:form>
<div>

stylesheet.css

#formdiv {
    margin: 0 auto;
}

-Or-

<head>
    <style>
        #formdiv {
            margin: 0 auto;
        }
    </style>
</head>

<h:body>
    <div id="formdiv">    
        <h:form id="frm">
            ...
        </h:form>
    <div>
</h:body>

Also see How to center a div horizontally

And How to position div in middle of screen

score 3 · Answer 2 · answered Mar 16 '15 at 23:36

Depending on the content of your form you may need to apply the CSS style at a deeper level than an outermost div

 <div class="centred-form">
    <h:form>
       <h:panelGrid>
          ...
       </h:panelGrid>
    </h:form>
</div>

will centre the form but the panel grid will be left aligned on the form defeating the purpose.

Instead you can apply a style class to the panel grid:

    <h:form>
       <h:panelGrid styleClass="centred-form">
          ...
       </h:panelGrid>
    </h:form>

and the CSS

.centred-form {
    margin : 0 auto;
}

How render form at the center

2 Answers2