Centering div element inside another div element

Question

I have the following HTML code generated by Primefaces's components (I've only considered HTML important code)

<html>
    <body>
    <link type="text/css" rel="stylesheet" href="/tiendaVirtual/css/init.css" /></head><body>
    <div id="page">
        <div id="header">
            //Header content
        </div>
        <div id="content">
            <div id="dvLogin">
                <div id="pnlLogin" class="ui-panel ui-widget ui-widget-content ui-corner-all pnlLogin" data-widget="widget_pnlLogin">
                    <div id="pnlLogin_header" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all">
                        <span class="ui-panel-title">Login</span>
                    </div>
                    <div id="pnlLogin_content" class="ui-panel-content ui-widget-content">
                    </div>
                <div>
            </div>
        </div>
        <div id="footer">
            //Footer content
        </div>
    </div>
    </body>
</html>

And your css file init.css:

body{
    font-size: 12px !important;
}

#page{
    width: 100%;
    height: 100%;
    position: absolute !important;
}

#header{
    height: auto !important;
    top: 0;
}

#content{
    height: 100% !important;
    display: block;

}

#footer{
    height: auto !important;
    position: absolute; 
    width: 100%; 
    bottom: 0;
}
.dvLogin{
    vertical-align: middle;
    height: 660px !important;
}

.pnlLogin{
    width: 500px;
    margin: auto auto !important;
}

#pnlFooter{
    margin-bottom: 10px !important

This generate the following HTML page:

enter image description here

I want that panel called 'Login' is centered vertically and horizontally but I don't know as...

PD:

I added the XHTML pages:

login.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/templates/template.xhtml">
    <ui:define name="content">
        <h:form prependId="false">
        <div id="dvLogin">

            <p:panel id="pnlLogin" header="Login" styleClass="pnlLogin">
                <h:panelGrid columns="2">
                    <p:outputLabel value="Usuario"/>
                    <p:inputText id="txtUsuario" value="#{loginBean.usuario}" required="true" requiredMessage="Especificar usuario"/> 
                    <p:outputLabel value="Contraseña"/>
                    <p:password id="pswContrasenia" value="#{loginBean.contrasenia}" required="true" requiredMessage="Especificar contraseña"/>  
                </h:panelGrid>
                <p:commandButton value="Ingresar" action="#{loginBean.ingresar}" />
            </p:panel>
        </div>
        </h:form>

    </ui:define>
</ui:composition>

template.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
<f:loadBundle basename="resources.application" var="msg"/>

<h:head>
    <link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/init.css" />
</h:head>
<h:body>
    <div id="page">
        <div id="header">
            <ui:insert name="header" >
              <ui:include src="/templates/header.xhtml" />
            </ui:insert>
        </div>
        <div id="content">
            <ui:insert name="content">

            </ui:insert>
        </div>
        <div id="footer">
            <ui:insert name="footer" >
              <ui:include src="/templates/footer.xhtml" />
            </ui:insert>
        </div>
    </div>


</h:body>
</html>

header.xhtml

<ui:composition
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
    <p:panel>
        <p:graphicImage value="/img/common/logo.png" />
    </p:panel>
</ui:composition>

footer.xhtml

<ui:composition
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
    <p:panel id="pnlFooter">
        Everis Peru &#169; - Shoppping Cart
    </p:panel>
</ui:composition>

What about the css inside `init.css` ? can you replicate this using a http://jsfiddle.net ? — T J, Mar 31 '14 at 17:50
possible duplicate of [Center a DIV horizontally and vertically](http://stackoverflow.com/questions/14123999/center-a-div-horizontally-and-vertically) — T J, Mar 31 '14 at 17:51
The css you've shared isn't replicating the image you've posted.. — T J, Mar 31 '14 at 17:57
The answer (accepted by you) shows it is not really PrimeFaces related, so adding it to the title is not only superfluous (it is already tagged that way) but sort of wrong... — Kukeltje, Jun 06 '17 at 20:21

score 0 · Accepted Answer · answered Mar 31 '14 at 18:06

There are few things that you need to look.

1) there is no need of unwanted position absolute and !important tags this can be simple achieved with diaplay: table properties as follows

CSS

#content:before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */

  /* For visualization 
  background: #808080; width: 5px;
  */
 }

#dvLogin {
  display: inline-block;
  vertical-align: middle;
  width: 500px;
  padding: 10px 15px;
  border: #a0a0a0 solid 1px;
  background: #f00;
 }

html, body{height:100%;}

Demo - jsfiddle i.e. in full screen Demo full screen

also you need to check CSS as unwanted css are commented in above demo. so Please check that

Reference Link

Hope it Helps!

Centering div element inside another div element

1 Answers1