--- title: How to Horizontally Center a Div Tag in Another Div Tag --- ## How to Horizontally Center a Div Tag in Another Div Tag Horizontally centering a `
` inside of another `
` is pretty easy. Let's start by creating two div tags with "parent" and "child" classes. The parent will be our container, and the child will be the `
` we're horizontally centering. ```html How to Horizontally Center a Div Tag in Another Div Tag

This is the center.

``` There are a couple ways you can tacklet this, but for this tutorial let's focus on two. In the first we'll center our child `
` using `margin` and in the second we'll use `flexbox`. ### Example of Centering a Div Tag with Margins If you specify a `width` on your child div you can use `margin: auto`. This will center your child `
` by evenly distributing it's left-and-right margins. ```css .parent { border: 2px solid red; } .centered-child { width: 50%; margin: auto; border: 1px solid black; } ``` ### Example of Centering a Div Tag with Flexbox Using flexbox to center a `
` is slightly different. First, it doesn't require you to specify `width` on your child `
`. Second, you actually center the child `
` by applying css properties on the parent `
`. To center a child `
` using flexbox you need to use `display: flex` along with `justify-content: center` on the parent `
`. ```css .parent { display: flex; justify-content: center; border: 2px solid red; } .centered-child { border: 1px solid black; } ``` #### More Information: [Flexbox Support Matrix](http://caniuse.com/#search=flexbox)