介绍
mofron-tmpl-centerconts 是一个基于 mofron 构建的中央内容模板包，用于将内容垂直和水平居中。该模板包提供了多种自定义样式和配置选项，适用于不同的项目需求。
安装
您可以使用 npm 来安装 mofron-tmpl-centerconts:
npm install mofron-tmpl-centerconts
或者，在 HTML 文档的 head 部分中，添加以下代码：
<script src="https://unpkg.com/mofron-tmpl-centerconts"></script>
使用
mofron-tmpl-centerconts 基于 mofron 构建，使用时需要先引入 mofron 的类库。在 HTML 文件的 head 部分中，添加以下代码：
<script src="https://unpkg.com/mofron"></script>
引入后，在 JavaScript 文件中，初始化 mofron-tmpl-centerconts：
const centertmpl = require("mofron-tmpl-centerconts");
const comp = new centertmpl(); // 或者 new mofron.Component(centertmpl);然后，将组件添加到 HTML 文档中：
comp.addChild("Hello World!");最后，将组件挂载到一个 HTML 元素中：
comp.mount(document.getElementById("myDiv"));现在，您就可以在浏览器中看到一个居中的 "Hello World!"。
自定义样式
mofron-tmpl-centerconts 提供了多种自定义样式选项，您可以根据需求进行修改。
- padding: 内边距，可以是数值或者带单位的字符串，如“10px”。
const comp = new centertmpl({padding: "20px"});- backgroundColor: 背景颜色，可以是颜色名称、HEX、RGB 或者 RGBA。
const comp = new centertmpl({backgroundColor: "#F0F0F0"});- borderRadius: 边框圆角，可以是数值或者带单位的字符串，如“10px”。
const comp = new centertmpl({borderRadius: "10px"});- border: 边框样式，可以是 CSS 样式字符串，如“1px solid black”。
const comp = new centertmpl({border: "1px solid black"});- width: 宽度，可以是数值或者带单位的字符串，如“100%”。
const comp = new centertmpl({width: "50%"});- height: 高度，可以是数值或者带单位的字符串，如“100%”。
const comp = new centertmpl({height: "50vh"});示例代码
-- -------------------- ---- -------
--------- -----
------
------
--------------------------------------
----- ----------------
------- ----------------------------------------
------- ---------------------------------------------------------
-------
---- -
------- --
------- ------
-------- -----
---------------- -------
------------ -------
-
--------
-------
------
---- -----------------
--------
----- ---------- - -----------------------------------
----- ---- - --- ------------
-------- -------
---------------- ----------
------------- -------
------- ---- ----- -------
------ --------
------- -------
---
-------------------- ---------
---------------------------------------------
---------
-------
-------在浏览器中打开该 HTML 文件，您应该能看到一个居中的带边框、圆角、背景色、内边距的 “Hello World!”。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600554b181e8991b448d1e82