# VCenter/HCenter

[🔰 CSS](https://lochiwei.gitbook.io/web/css) ⟩ [Layout](https://lochiwei.gitbook.io/web/css/layout) ⟩ [System](https://lochiwei.gitbook.io/web/css/layout/system) ⟩

## vcenter

{% tabs %}
{% tab title="live" %}

{% endtab %}

{% tab title="vcenter.mjs" %}

```javascript
// 0.0.8 + vcenter.mjs

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

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

{% endtab %}

{% tab title="vcenter.css" %}

```css
/*  0.0.8 + vcenter, hcenter */

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

{% endtab %}

{% tab title="💾 程式" %}

* codepen ⟩ [\<vcenter>, \<hcenter> prototype](https://codepen.io/lochiwei/pen/MWoNxbL?editors=0101)
* replit ⟩ [layout (0.0.8) + vcenter, hcenter](https://replit.com/@pegasusroe/layout-008-VCenter-HCenter#layout/vcenter.css)
  {% endtab %}
  {% endtabs %}

## hcenter

{% tabs %}
{% tab title="hcenter.mjs" %}

```javascript
// 0.0.8 + HCenter.mjs

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

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

{% endtab %}

{% tab title="hcenter.css" %}

```css
/*  0.0.8 + hcenter */

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

{% endtab %}

{% tab title="Second Tab" %}

{% endtab %}
{% endtabs %}