---
name: Middle
menu: Patterns
parent: Modules
route: /patterns/middle
---

# Middle

> The **Middle** component is for use inside **Section**. It places content in the centre of that **Section**.

## Configurations

### Basic example

**Middle** positions content in the centre of the screen along the horizontal axis.

```specimen-react
<Middle>
  <span>Content here</span>
</Middle>
```

### With a max width

You can override the default `max-width` using the `maxWidth` prop.

```specimen-react
<Middle maxWidth="60rem">
  <span>Content here</span>
</Middle>
```

### With a different text alignment

You can override the default `text-align` of `center` using the `textAlign` prop.

```specimen-react
<Middle textAlign="left">
  <span>Content here</span>
</Middle>
```

### With a large view max width

You can add a `max-width` for large views using the `width` prop.

```specimen-react
<Middle width="30rem">
  <span>Content here</span>
</Middle>
```

## Implementation

### Props

#### `maxWidth`

The maximum width of `Middle`. Default is `30rem`.

#### `textAlign`

The alignment of text within `Middle`. Default is `center`.

#### `width`

The max width for large viewports.
