# Centering Vertically and Horizontally Using Flexbox | kirupa.com

**URL:** https://forum.kirupa.com/t/centering-vertically-and-horizontally-using-flexbox-kirupa-com/352328
**Category:** programming
**Created:** [November 23, 2014, 5:10am UTC](https://forum.kirupa.com/t/centering-vertically-and-horizontally-using-flexbox-kirupa-com/352328 "2014-11-23T05:10:23Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [November 23, 2014, 5:10am UTC](https://forum.kirupa.com/t/centering-vertically-and-horizontally-using-flexbox-kirupa-com/352328/1 "2014-11-23T05:10:25Z")

</div>

by [kirupa](http://www.kirupa.com/me/index.htm) | 27 January 2012

Strangely enough, one of the more difficult things to do using CSS is centering content. Centering content horizontally is relatively easy. Centering content vertically is a whole different story. If you've ever tried it, it is hard - especially if you want to avoid using tables. Fortunately, our cries for help were heard, and one of the new weapons added to the CSS3 arsenal to solve this problem is a layout type known as the **flexible box layout**...also known as **flexbox**. Flexbox provides you with some really nifty functionality that makes centering content either horizontally or vertically a snap!

* * *
This is a companion discussion topic for the original entry at [http://www.kirupa.com/html5/centering\_vertically\_horizontally.htm](http://www.kirupa.com/html5/centering_vertically_horizontally.htm)

---

<div class="post-metadata">

### Author: ![Jai\_ganesh\_Prakasam](https://avatars.discourse-cdn.com/v4/letter/j/9e8a1a/32.png) [@Jai\_ganesh\_Prakasam](https://forum.kirupa.com/u/Jai_ganesh_Prakasam)
#### Post date: [March 27, 2019, 1:06pm UTC](https://forum.kirupa.com/t/centering-vertically-and-horizontally-using-flexbox-kirupa-com/352328/2 "2019-03-27T13:06:56Z")

</div>

That was a clean explanation. Your post saved my day bro.

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [March 27, 2019, 9:19pm UTC](https://forum.kirupa.com/t/centering-vertically-and-horizontally-using-flexbox-kirupa-com/352328/3 "2019-03-27T21:19:38Z")

</div>

Glad it helped 😛

---

<div class="post-metadata">

### Author: ![Kris\_Dikeman](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kris_dikeman/32/9588_2.png) [@Kris\_Dikeman](https://forum.kirupa.com/u/Kris_Dikeman)
#### Post date: [April 14, 2019, 5:16pm UTC](https://forum.kirupa.com/t/centering-vertically-and-horizontally-using-flexbox-kirupa-com/352328/4 "2019-04-14T17:16:53Z")

</div>

This is exactly what I needed! Thank you!

Kris