# Centered Box

### The Goal

One of the most frequently used layouts is a centered box. Any situation requiring showing information in the middle of the screen must follow this procedure.

![Typical example of a centered box component](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FQDs21MwCwHUNqZ83u66s%2Fimage.png?alt=media\&token=e9903a70-738d-45d4-b35b-9b3ec593e1ca)

### What We Are Going to Do

{% tabs %}
{% tab title="Project Structure" %}

* [ ] View\[`centeredBox`]
  * [ ] Container\[`container1`]
    * [ ] Box\[`box1`]
      {% endtab %}

{% tab title="View\[centeredBox]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FUlwlkN6C6n6LIDNzhehS%2Fimage.png?alt=media\&token=ec65b12f-e94d-446f-be45-5b544b65ba60)
{% endtab %}
{% endtabs %}

### 1. Create a Centered Box

Preparation of a centered box is easy and intuitive, taking just a few steps.

1. Create a new **View** called it `centeredBox`.
2. Place in a new **Container***,* name it `container1,`and set up properties as follows:
   1. *Horizontal Alignment* -> `Center`; *Vertical Alignment* -> `Middle`
   2. The *Item Flex* has to be set up on `Stretch`, and the rest of the responsive screens setting is `Inherit from the base`.
   3. Optionally, you can define *Padding* and *Spacing* attributes to `Medium`, for further use.
3. Put in a new **Box**, and name it `box1`.
   1. Configure its Layout properties as *Background* -> `WHITE`; *Border Color* -> `GRAY`; *Border Width* -> `2px`; *Border Radius* -> `10px`; *Shadow* -> `Large`
   2. Both of *Width* and *Height* are `350px` for the *Base* and *Large Screens*; It can be acceptable even for *Tablet* setting, but *Phone Screen* looks better on `250px`.

{% tabs %}
{% tab title="The Base and Large Screen 350px" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FDli8qGV2VgtsgRiFuQU0%2Fimage.png?alt=media\&token=1b0e5f7b-b753-4f2b-b5ac-3a4f7213d195)
{% endtab %}

{% tab title="The Phone Screen 250px" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FVeC4BphKXAwsOmTnEoAo%2Fimage.png?alt=media\&token=58426ae5-3697-46cc-9f6c-d1359189a645)
{% endtab %}
{% endtabs %}

### The Conclusion

Always remember that any layout properties have to be adapted to different screen types. Of course, unless we are developing just desktop or cell phone applications.