Question

我有一个使用jsf-2和richfaces的Web应用程序。我想在等待ajax响应时（单击菜单项时）在页面上放置一个加载蒙版，因此我将加载图像添加到还定义菜单项的模板中：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:c="http://java.sun.com/jstl/core"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:a4j="http://richfaces.org/a4j"
    template="/templates/main-template.xhtml">
    <ui:define name="html_head">
        <link rel="stylesheet" type="text/css" media="all"
            href="${request.contextPath}/resources/css/main.css" />
    </ui:define>

    <ui:define name="title">Title</ui:define>

    <ui:define name="top_menu">
        <li id="product_tab" class="process-a-tab"><h:commandLink
                action="#{AViewController.doView()}" onclick="document.getElementById('loading').style.display='block'">#{msgApp.a_tab}</h:commandLink>
        </li>
        <li id="mgmt_unit_tab" class="process-a-tab"><h:commandLink
                action="#{BViewController.doView()}" onclick="document.getElementById('loading').style.display='block'">#{msgApp.b_tab}</h:commandLink>
        </li>
        <img id="loading" src="resources/img/loading.gif" style="display:none" />

    </ui:define>

    <ui:define name="head">
    </ui:define>

    <ui:define name="footer">
        <h:outputText value="Application v 4.0" />
    </ui:define>
</ui:composition>

#loading的css：

#loading {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9999;;
  opacity: 0.4;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
}

上面的菜单模板随后包含在其他页面中：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:c="http://java.sun.com/jstl/core"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    template="/templates/page-template.xhtml">

    <ui:define name="title">#{msgApp.title}</ui:define>

    <ui:define name="breadcrumb">
        <ui:include src="bread_crumb.xhtml" />
    </ui:define>

    <ui:define name="amount">
        <ui:include src="amount.xhtml" />
    </ui:define>

    <ui:define name="subTotal">
        <ui:include src="sub_total.xhtml" />
    </ui:define>

    <ui:define name="total">
        <ui:include src="total.xhtml" />
    </ui:define>

    <ui:define name="content">
        <ui:include src="content.xhtml" />
    </ui:define>
</ui:composition>

我遇到的问题是，加载图像不是位于页面中心，而是位于周围的<ui:define>中心，这使得它几乎不可见。

如何在页面上居中？

Answer 1

使用CSS Flexbox：

  display: flex;
  align-items: center;
  justify-content: center;

Answer 2

我个人通常要做的是有一个position: fixed;并且是width: 100%; height: 100vh;的覆盖元素。然后使用justify-content: center; align-items: center;将其设置为flexbox。然后将您的加载图片放在该元素中。元素覆盖整个视口，您的图像将位于该视口的中心。

如何使加载图像居中于页面中心？

2 个答案: