VCenter/HCenter

🔰 CSS ⟩ Layout ⟩ System ⟩

vcenter

live

vcenter.mjs

// 0.0.8 + vcenter.mjs

/**
 * VCenter
 * ----------------
 * tag: <vcenter->
 */
export default class VCenter extends HTMLElement {}

// ⭐️ register <vcenter->
customElements.get('vcenter-') || 
customElements.define('vcenter-', VCenter);

vcenter.css

/*  0.0.8 + vcenter, hcenter */

/* <vcenter> */
vcenter- {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}

💾 程式

• codepen ⟩ <vcenter>, <hcenter> prototype

• replit ⟩ layout (0.0.8) + vcenter, hcenter

hcenter

hcenter.mjs

// 0.0.8 + HCenter.mjs

/**
 * HCenter
 * ----------------
 * tag: <hcenter->
 */
export default class HCenter extends HTMLElement {}

// ⭐️ register <hcenter->
customElements.get('hcenter-') || 
customElements.define('hcenter-', HCenter);

hcenter.css

/*  0.0.8 + hcenter */

/* <hcenter> */
hcenter- {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}

Second Tab