# 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](https://3933488479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjpWd52BKwABWxF2lScUK%2Fuploads%2Fgit-blob-d944febe24db1306c462b1ce5188a685b4e04e38%2F2017-10-13_1811.png?alt=media\&token=ef29dddf-fe42-435d-8eda-7de67c066feb) ![Center Container Vertically Outline](https://3933488479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjpWd52BKwABWxF2lScUK%2Fuploads%2Fgit-blob-e6316b9461ddc1962cc467dd3c7f10a9d22e82aa%2F2017-10-18_1207.png?alt=media\&token=d3b148bc-d314-4c29-a8fd-ec0726049066) 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](https://3933488479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjpWd52BKwABWxF2lScUK%2Fuploads%2Fgit-blob-27da661b0d91bf7d271942ecac54013b88a150ad%2F2017-10-13_1814.png?alt=media\&token=969e7f65-af9b-4551-843b-6e138049ea15) ![Center Container Outline](https://3933488479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjpWd52BKwABWxF2lScUK%2Fuploads%2Fgit-blob-25e8c78b2c87ffc1978c8622046dddc6f7f17443%2F2017-10-13_1821.png?alt=media\&token=76cbd7b0-2350-4391-b56a-3f23775b1052) ## Getting Started ## Create a Center Container

Create a Center Container

These are the steps for creating a Center Container : 1. Open the [Form Editor](https://docs.servoy.com/reference/servoy-developer/object-editors/form-editor) 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](https://docs.servoy.com/guides/develop/application-design/forms/layout-management/b12grid#container), [Row](https://docs.servoy.com/guides/develop/application-design/forms/layout-management/b12grid#row) 4. Add other needed components inside the **Center Container**, **except** for [Container](https://docs.servoy.com/guides/develop/application-design/forms/layout-management/b12grid#container), [Column](https://docs.servoy.com/guides/develop/application-design/forms/layout-management/b12grid#column) or [Flex Item](https://docs.servoy.com/guides/develop/application-design/forms/layout-management/flexbox#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](https://3933488479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjpWd52BKwABWxF2lScUK%2Fuploads%2Fgit-blob-b723e7f30165b5d374244fbc24820dd39c89b77d%2F2017-10-18_1215.png?alt=media\&token=f79a4053-f8b5-4094-a5e6-002390fb6e32) ![Multiple Center Content Outline](https://3933488479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjpWd52BKwABWxF2lScUK%2Fuploads%2Fgit-blob-495c2487639a815ba86173bf2989fb120aea2122%2F2017-10-18_1217.png?alt=media\&token=35efa30b-887e-49a5-86e2-bcd6e6b33e9c) ## 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](https://3933488479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjpWd52BKwABWxF2lScUK%2Fuploads%2Fgit-blob-a3b7fabba6ffcc0fe6f456c87c61cf88843b6e08%2F2017-10-18_1255.png?alt=media\&token=cfa85eee-0541-4946-a8de-05c12382184f) ![Center Content Min Width Outline](https://3933488479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjpWd52BKwABWxF2lScUK%2Fuploads%2Fgit-blob-0cef3f909e6aeece1515b0e1dd789bd7048a868c%2F2017-10-18_1253.png?alt=media\&token=61354330-8943-4dab-b7f3-b74295caa6f2) ![Center Content Min Width Style Class](https://3933488479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjpWd52BKwABWxF2lScUK%2Fuploads%2Fgit-blob-824a8fb54372643348eec00aeab44616bf9b881f%2F2017-10-18_1256.png?alt=media\&token=73e62f83-eb95-4a0f-89d2-a789c17359b0)