Center

danger

This component will be marked as deprecated and removed in an upcoming version of the component library.

Please avoid using this component in new implementations and consider replacing its current implementation with dhl-grid-container in combination with dhl-grid-cell.

A layout utility Center component used to automatically center children given a provided width and height.

Import

React

// with @dhl-official/react-library:
import { DhlCenter } from "@dhl-official/react-library"

// with @dhl-official/ui-libraries/react-library:
import { DhlCenter } from "@dhl-official/ui-libraries/react-library"

Angular

If the DUIL has been installed, you can use the web component directly:

<dhl-center></dhl-center>

Vue.js

// with @dhl-official/vue-library:
import { DhlCenter } from "@dhl-official/vue-library"

// with @dhl-official/ui-libraries/vue-library:
import { DhlCenter } from "@dhl-official/ui-libraries/vue-library"

Code

React

<DhlCenter>
    <DhlButton>0</DhlButton>
    <DhlButton>1</DhlButton>
    <DhlButton>2</DhlButton>
    <DhlButton>3</DhlButton>
</DhlCenter>

Angular

<dhl-center>
    <dhl-button>0</dhl-button>
    <dhl-button>1</dhl-button>
    <dhl-button>2</dhl-button>
    <dhl-button>3</dhl-button>
</dhl-center>

Vue.js

<dhl-center>
    <dhl-button>0</dhl-button>
    <dhl-button>1</dhl-button>
    <dhl-button>2</dhl-button>
    <dhl-button>3</dhl-button>
</dhl-center>

Interactive Demo

Readme

Properties

Property	Attribute	Description	Type	Default
direction	direction	An optional prop used to define the flex-direction of the flex container.	"column" \| "column-reverse" \| "row" \| "row-reverse"	undefined
gap	gap	An optional prop used to define the gap of the flex container.	string	"var(--dui-size-space-0)"
h	h	[DEPRECATED] An optional prop used to define the height of the flex container.	string	"auto"
height	height	An optional prop used to define the height of the flex container.	string	"auto"
m	m	[DEPRECATED] An optional prop used to define the margin of the flex container.	string	"var(--dui-size-space-0)"
margin	margin	An optional prop used to define the margin of the flex container.	string	"var(--dui-size-space-0)"
p	p	[DEPRECATED] An optional prop used to define the padding of the flex container.	string	"var(--dui-size-space-0)"
padding	padding	An optional prop used to define the padding of the flex container.	string	"var(--dui-size-space-0)"
w	w	[DEPRECATED] An optional prop used to define the width of the flex container.	string	"var(--dui-size-space-full)"
width	width	An optional prop used to define the width of the flex container.	string	"var(--dui-size-space-full)"

Slots

Slot	Description
"unnamed"	unnamed children slot for elements to be aligned by DhlCenter

Dependencies

Depends on

• dhl-flex

Graph

---

Built by DHL User Interface Library Team!