如何使加载图像以我的页面为中心？答案

【问题标题】：How do I make my loading image centered on my page?如何使加载图像以我的页面为中心？
【发布时间】：2019-05-25 15:11:31
【问题描述】：

我有一个使用 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> 为中心，这使得它几乎不可见。

如何在页面上居中？

【问题讨论】：

尝试位置：固定；用于装载机。
请记住，客户端 ALL 是 html、css 和 javascript。所以发布的内容比 xhtml 更相关（从答案中可以看出）

标签： css jsf-2 richfaces

【解决方案1】：

使用css flexbox：

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

【讨论】：

【解决方案2】：

我个人通常做的是有一个覆盖元素 position: fixed; 和 width: 100%; height: 100vh;。然后用justify-content: center; align-items: center; 把它变成一个flexbox。然后将您的加载图像放入该元素中。该元素覆盖整个视口，您的图像将位于该视口的中心。

【讨论】：