# 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.


---

# 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.adapptio.com/working-with-adapptio/how-to/layouts/centered-box.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.