# Center Container

## Overview

The **Center Container** allows its content vertically and horizontally in a **Servoy Responsive Form**.

You can drop Servoy Web Components and nest other 12Grid containers into its content section. You can also nest center container within each other.

![Center Container Vertically](/files/HstaAWZzmKjXocPiF9Gx)

![Center Container Vertically Outline](/files/dUb7XiCwK3msBF8HZr5H)

To center the content vertically the parent container must have a known height; if the height of it's parent container is not known the container will center it's content only horizontally.

Note that 12Grid rows and columns usually don't have a known height (unless their height is set in the styleSheet), therefore the center container contained in a 12Grid column will center its content vertically.

![Center Container](/files/pnFZSK380tb58TRvxJhL)

![Center Container Outline](/files/ce21ZXamMh49andGgl3r)

## Getting Started

## Create a Center Container

<div align="left"><figure><img src="/files/Ho6wejO0ae1pyAGmjy2Y" alt=""><figcaption><p>Create a Center Container</p></figcaption></figure></div>

These are the steps for creating a Center Container :

1. Open the [Form Editor](/reference/servoy-developer/object-editors/form-editor.md) of your **responsive form**
2. Find **Center Container** in *Templates* subsection of the *Bootstrap 12-Grid* section in the components' pallet
3. Drag and drop the **Center Container** component in:
   * empty space of the form, as an independent component
   * inside any other container components, **except** [Container](/guides/develop/application-design/forms/layout-management/home/b12grid.md#container), [Row](/guides/develop/application-design/forms/layout-management/home/b12grid.md#row)
4. Add other needed components inside the **Center Container**, **except** for [Container](/guides/develop/application-design/forms/layout-management/home/b12grid.md#container), [Column](/guides/develop/application-design/forms/layout-management/home/b12grid.md#column) or [Flex Item](/guides/develop/application-design/forms/layout-management/home/flexbox.md#flex-item)

## Center multiple elements

You can drop Servoy Web Components and nest other 12Grid containers into its content section to center multiple elements as a single block. You can also nest multiple center containers to center sub-content within the content section; note that as for the 12Grid rows, sub-content of the center container are centered only horizontally by default (unless you define a known height or min-height to the sub center container via CSS); this is the case since the content of the top-level center container doesn't have a known height but it is 'auto' calculated depending on its content.

![Multiple Center Content](/files/DC3MiO1gDcyCx4atrAo9)

![Multiple Center Content Outline](/files/jAUyRRIcg5urgN8V9TYY)

## Width and Height of the center content

The center content section doesn't have a known height and width but its height and width are set to '*auto*'; this means that the content section will grow as much it needs (depending on its content) and not more.

Since the content section height and width are *auto*, a container or a web component which has width or height equal to 100%, will also fallback into width and height equal to *auto*. For example a textbox component having a *form-control* class, which usually takes 100% of the width, won't grow to the whole available width instead will use its default width (which has different value depending on browser version and OS system).

### Min Width

You can set a min-width to the content section (using CSS classes) to stretch its content to a minimum dimension; inner containers and components having width equal to 100% will grow up to at least the min-width of the content section.

![Center Content Min Width](/files/3QjIBCdb0f9235avMRdU)

![Center Content Min Width Outline](/files/BMIhblfwFXJPzXol5i8D)

![Center Content Min Width Style Class](/files/cJwvnqppuVcNjPItonOF)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.servoy.com/guides/develop/application-design/forms/layout-management/home/center-container.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
