> For the complete documentation index, see [llms.txt](https://docs.adapptio.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.adapptio.com/working-with-adapptio/how-to/layouts/centered-box.md).

# 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](/files/PuVl5e5yflf4jDkLikEg)

### What We Are Going to Do

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

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

{% tab title="View\[centeredBox]" %}
![](/files/iswod8ZpswfIwRKoGOJ9)
{% 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" %}
![](/files/O96rsNRSMFj4xBLKps3l)
{% endtab %}

{% tab title="The Phone Screen 250px" %}
![](/files/u8g4qvxocT3tsUddgH96)
{% 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.