title: Center composable in Jetpack compose
body: <p>Older versions of Jetpack compose <code>dev-0.x</code> used to have a <code>Center</code> composable to center a widget.</p>
  <p>However, in the <code>alpha</code> version it has been removed and no specific composable made to handle this task.</p>
  <p>In  my case I want to show a progress indicator at the center until data is fetched:</p>
  <pre class="lang-kotlin prettyprint-override"><code>Surface(color = MaterialTheme.colors.background) {
      val state = viewModel.userState
      if (state == null) {
          CircularProgressIndicator()
      } else {
          UserDigest(state = state)
      }
  }
  </code></pre>
  <p>The result is obviously something like this:</p>
  <p><a href="https://i.stack.imgur.com/i09k4.png" rel="noreferrer"><img src="https://i.stack.imgur.com/i09k4.png" alt="enter image description here" /></a></p>
  <p>And the indicator is at the corner.</p>
  <hr />
  <p>Adding <code>fillMaxSize()</code> to the Indicator does not help either:</p>
  <pre class="lang-kotlin prettyprint-override"><code>CircularProgressIndicator(modifier = Modifier.fillMaxSize())
  </code></pre>
  <p><a href="https://i.stack.imgur.com/RFFwp.png" rel="noreferrer"><img src="https://i.stack.imgur.com/RFFwp.png" alt="enter image description here" /></a></p>
  <p>So, how do I move it (generally a <code>composable</code>) to the center of an area?</p>