Contents
  1. 1. Center a Div
    1. 1.1. Horizontally Center a Div
      1. 1.1.1. Using margin
      2. 1.1.2. Using flex
      3. 1.1.3. Using position
    2. 1.2. Vertically Center a Div
      1. 1.2.1. Using flex
      2. 1.2.2. Using position
    3. 1.3. Horizontally and Vertically Center a Div
      1. 1.3.1. Using flex
      2. 1.3.2. Using grid
      3. 1.3.3. Using position
      4. 1.3.4. Using margin and grid
      5. 1.3.5. Using margin and flex
  2. 2. Center Text
    1. 2.1. Horizontally Center Text
      1. 2.1.1. Using text-align
      2. 2.1.2. Using flex
    2. 2.2. Vertically Center Text
      1. 2.2.1. Using height and line-height
      2. 2.2.2. Using table-cell and vertical-align
      3. 2.2.3. Using pading-top and padding-bottom
      4. 2.2.4. Using flex
    3. 2.3. Horizontally and Vertically Center Text
      1. 2.3.1. Using text-align + line-height
      2. 2.3.2. Using text-align + table-cell and vertical-align
      3. 2.3.3. Using text-align + padding top and bottom
      4. 2.3.4. Using flex

Center a Div

The HTML example

1
2
3
4
5
<div class="container" style="height: 200px; width: 100%;">
<div class="child" style="width: 500px; height: 100px;">
I am the child
</div>
</div>

Horizontally Center a Div

Using margin

1
2
3
4
5
.container {
}
.child {
margin: 0 auto;
}

Using flex

1
2
3
4
5
6
.container {
display: flex;
justify-content: center;
}
.child {
}

Using position

1
2
3
4
5
6
7
8
.container {
position: absolute;
}
.child {
position: absolute;
left: 50%;
transform: translate(-50%);
}

Vertically Center a Div

Using flex

1
2
3
4
5
6
.container {
display: flex;
align-items: center;
}
.child {
}

Using position

1
2
3
4
5
6
7
8
.container {
position: absolute;
}
.child {
position: absolute;
top: 50%;
transform: translate(0, -50%);
}

Horizontally and Vertically Center a Div

Using flex

1
2
3
4
5
6
7
.container {
display: flex;
align-items: center;
justify-content: center;
}
.child {
}

Using grid

1
2
3
4
5
6
.container {
display: grid;
place-items: center;
}
.child {
}

Using position

1
2
3
4
5
6
7
8
9
.container {
position: absolute;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

Using margin and grid

1
2
3
4
5
6
.container {
display: grid;
}
.child {
margin: auto;
}

Using margin and flex

1
2
3
4
5
6
.container {
display: flex;
}
.child {
margin: auto;
}

Center Text

The HTML example

1
2
3
<div class="container" style="width: 500px; height: 100px;">
I am the text
</div>

Horizontally Center Text

Using text-align

1
2
3
.container {
text-align: center;
}

Using flex

1
2
3
4
.container {
display:flex;
justify-content: center;
}

Vertically Center Text

Using height and line-height

center a single line text

1
2
3
4
.container {
height: 50px;
line-height: 50px;
}

Using table-cell and vertical-align

1
2
3
4
.container {
display:table-cell;
vertical-align:middle;
}

Using pading-top and padding-bottom

1
2
3
4
.container {
padding-top: 100px;
padding-bottom: 100px;
}

Using flex

1
2
3
4
.container {
display:flex;
align-items:center;
}

Horizontally and Vertically Center Text

Using text-align + line-height

Using text-align + table-cell and vertical-align

Using text-align + padding top and bottom

Using flex

1
2
3
4
5
.container {
display:flex;
align-items:center;
justify-content: center;
}
Contents
  1. 1. Center a Div
    1. 1.1. Horizontally Center a Div
      1. 1.1.1. Using margin
      2. 1.1.2. Using flex
      3. 1.1.3. Using position
    2. 1.2. Vertically Center a Div
      1. 1.2.1. Using flex
      2. 1.2.2. Using position
    3. 1.3. Horizontally and Vertically Center a Div
      1. 1.3.1. Using flex
      2. 1.3.2. Using grid
      3. 1.3.3. Using position
      4. 1.3.4. Using margin and grid
      5. 1.3.5. Using margin and flex
  2. 2. Center Text
    1. 2.1. Horizontally Center Text
      1. 2.1.1. Using text-align
      2. 2.1.2. Using flex
    2. 2.2. Vertically Center Text
      1. 2.2.1. Using height and line-height
      2. 2.2.2. Using table-cell and vertical-align
      3. 2.2.3. Using pading-top and padding-bottom
      4. 2.2.4. Using flex
    3. 2.3. Horizontally and Vertically Center Text
      1. 2.3.1. Using text-align + line-height
      2. 2.3.2. Using text-align + table-cell and vertical-align
      3. 2.3.3. Using text-align + padding top and bottom
      4. 2.3.4. Using flex