How can I center text (horizontally and vertically) inside a div block?

Question

I have a div set to display:block (90px height and width), and I have some text inside.

I need the text to be aligned in the center both vertically and horizontally.

I have tried text-align:center, but it doesn't do the vertical centering part, so I tried vertical-align:middle, but it didn't work.

Any ideas?

I finally found a solution that works with relative sizes and no fixed heights: http://stackoverflow.com/a/16195362/1301331 — cirrus, Apr 24 '13 at 15:04
It is very important to know how to center / middle elements. The below document has given a very clear picture. http://www.w3.org/Style/Examples/007/center.en.html — shibualexis, Oct 05 '14 at 17:21
Here are two simple methods to center objects within divs, vertically, horizontally or both (pure CSS): http://stackoverflow.com/a/31977476/3597276 — Michael Benjamin, Aug 20 '15 at 14:43

score 1920 · Accepted Answer · edited Dec 12 '22 at 03:53

1920

If it is one line of text and/or image, then it is easy to do. Just use:

text-align: center;
vertical-align: middle;
line-height: 90px;       /* The same as your div height */

That's it. If it can be multiple lines, then it is somewhat more complicated. But there are solutions on http://pmob.co.uk/. Look for "vertical align".

Since they tend to be hacks or adding complicated divs... I usually use a table with a single cell to do it... to make it as simple as possible.

Update for 2020:

Unless you need make it work on earlier browsers such as Internet Explorer 10, you can use flexbox. It is widely supported by all current major browsers. Basically, the container needs to be specified as a flex container, together with centering along its main and cross axis:

#container {
  display: flex;
  justify-content: center;
  align-items: center;
}

To specify a fixed width for the child, which is called a "flex item":

#content {
  flex: 0 0 120px;
}

Example: http://jsfiddle.net/2woqsef1/1/

To shrink-wrap the content, it is even simpler: just remove the flex: ... line from the flex item, and it is automatically shrink-wrapped.

Example: http://jsfiddle.net/2woqsef1/2/

The examples above have been tested on major browsers including MS Edge and Internet Explorer 11.

One technical note if you need to customize it: inside of the flex item, since this flex item is not a flex container itself, the old non-flexbox way of CSS works as expected. However, if you add an additional flex item to the current flex container, the two flex items will be horizontally placed. To make them vertically placed, add the flex-direction: column; to the flex container. This is how it works between a flex container and its immediate child elements.

There is an alternative method of doing the centering: by not specifying center for the distribution on the main and cross axis for the flex container, but instead specify margin: auto on the flex item to take up all extra space in all four directions, and the evenly distributed margins will make the flex item centered in all directions. This works except when there are multiple flex items. Also, this technique works on MS Edge but not on Internet Explorer 11.

Update for 2016 / 2017:

It can be more commonly done with transform, and it works well even in older browsers such as Internet Explorer 10 and Internet Explorer 11. It can support multiple lines of text:

position: relative;
top: 50%;
transform: translateY(-50%);

Example: https://jsfiddle.net/wb8u02kL/1/

To shrink-wrap the width:

The solution above used a fixed width for the content area. To use a shrink-wrapped width, use

position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Example: https://jsfiddle.net/wb8u02kL/2/

If the support for Internet Explorer 10 is needed, then flexbox won't work and the method above and the line-height method would work. Otherwise, flexbox would do the job.

edited Dec 12 '22 at 03:53

Peter Mortensen

30,738
21
105
131

answered Apr 18 '11 at 13:29

nonopolarity

146,324
131
460
740

70

There's now a `display: table-cell` property for that, FYI. Using it makes the element behave like a table cell and allows `vertical-align: middle;` – Shauna Apr 18 '11 at 14:38
1

If you're using `font:` with these, make sure you put it ahead of `line-`height`. – user1135469 Aug 02 '13 at 10:03
it does not work in IE8, is there any other way I can make it work? – Dilip Rajkumar Aug 29 '13 at 09:53
I needed to center a multi-lined independent label (div-less), and the `text-align` alone solved it (and setting the width of course). Thanks. – yair Dec 05 '13 at 00:22
6

This might not be working as intended when the div contains
elements. – Martin Meeser Jun 05 '14 at 15:47
8

What if my height in %? – CandleCoder Aug 03 '16 at 01:24
1

with this approach text text has to be in one line, otherwise you will have second line 90px below first. – Tomasz Mularczyk Dec 10 '16 at 12:35
@太極者無極而生 - Why did you have to add in the solutions that I already posted in 2014? Really? – Josh Crozier Feb 14 '17 at 02:43
@JoshCrozier I did see `transform` came into place in other websites without seeing what you posted. Your way of using `position: absolute` isn't that flexible either, as you always have to have a `position: relative` in the outer container, or else it would be absolute relatively to the whole document and usually that's not what is wanted. – nonopolarity Feb 14 '17 at 06:54
@DannyWang well, since everyone is doing things this way you SHOULD accept and continue. And hey, good luck writing another 50 lines because your garbage css is not working once you change the dimension a little. For the link i found this guy, he WORKS at google. Maybe after you go through his examples you can reach him and he can tell you how you google. Don't be a sheep, question a little. https://philipwalton.github.io/solved-by-flexbox/ – msecilmis Mar 02 '18 at 07:08
@msecilmis I thought what magic you were suggesting here. So flexbox? which is already mentioned at the end of this answer as well as some other answers (Approach2 in josh crozier 's answer below). – Danny Wang Mar 02 '18 at 16:27
what if you have 2 items you want to center in a div? ie a shopping cart icon and a count icon in a button? – SuperUberDuper Aug 06 '21 at 12:09
text-align: center; vertical-align: middle; line-height: 90px; /* The same as your div height */ No need for vertical-align: middle; – arvinda kumar Dec 21 '21 at 10:03
@arvindakumar good catch. I think it is only needed if you want to vertically align 2 or 3 items going across the page, and so for each of them, you need to give it the `vertical-align: middle` – nonopolarity Dec 23 '21 at 16:36

score 492 · Answer 2 · edited Dec 12 '22 at 03:45

Common techniques as of 2014:

Approach 1 - transform translateX/translateY:

Example Here / Full Screen Example

In supported browsers (most of them), you can use top: 50%/left: 50% in combination with translateX(-50%) translateY(-50%) to dynamically vertically/horizontally center the element.
```
.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
```

Approach 2 - Flexbox method:

Example Here / Full Screen Example

In supported browsers, set the display of the targeted element to flex and use align-items: center for vertical centering and justify-content: center for horizontal centering. Just don't forget to add vendor prefixes for additional browser support (see example).
```
html, body, .container {
    height: 100%;
}
.container {
    display: flex;
    align-items: center;
    justify-content: center;
}
```

Approach 3 - table-cell/vertical-align: middle:

Example Here / Full Screen Example

In some cases, you will need to ensure that the html/body element's height is set to 100%.

For vertical alignment, set the parent element's width/height to 100% and add display: table. Then for the child element, change the display to table-cell and add vertical-align: middle.

For horizontal centering, you could either add text-align: center to center the text and any other inline children elements. Alternatively, you could use margin: 0 auto assuming the element is block level.
```
html, body {
    height: 100%;
}
.parent {
    width: 100%;
    height: 100%;
    display: table;
    text-align: center;
}
.parent > .child {
    display: table-cell;
    vertical-align: middle;
}
```

Approach 4 - Absolutely positioned 50% from the top with displacement:

Example Here / Full Screen Example

This approach assumes that the text has a known height - in this instance, 18px. Just absolutely position the element 50% from the top, relative to the parent element. Use a negative margin-top value that is half of the element's known height, in this case - -9px.
```
html, body, .container {
    height: 100%;
}
.container {
    position: relative;
    text-align: center;
}
.container > p {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -9px;
}
```

Approach 5 - The line-height method (Least flexible - not suggested):

Example Here

In some cases, the parent element will have a fixed height. For vertical centering, all you have to do is set a line-height value on the child element equal to the fixed height of the parent element.

Though this solution will work in some cases, it's worth noting that it won't work when there are multiple lines of text - like this.
```
.parent {
    height: 200px;
    width: 400px;
    text-align: center;
}
.parent > .child {
    line-height: 200px;
}
```

Methods 4 and 5 aren't the most reliable. Go with one of the first 3.

2. Flexbox method is the only one which works if .containers parent is absolute. 1. method makes parent to shrink because of absolute .container and 3. method simply didnt work while .parent had absolute position. — Jānis Gruzis, Apr 13 '15 at 08:03

score 100 · Answer 3 · edited Dec 12 '22 at 03:38

100

Using flexbox/CSS:

<div class="box">
    <p>&#x0D05;</p>
</div>

The CSS:

.box{
    display: flex;
    justify-content: center;
    align-items: center;
}

Taken from Quick Tip: The Simplest Way To Center Elements Vertically And Horizontally

edited Dec 12 '22 at 03:38

Peter Mortensen

30,738
21
105
131

answered Nov 10 '15 at 03:25

Vinod

4,138
11
49
65

5

Careful: Won't work in IE. You'll need to add `display: -ms-flexbox; -ms-flex-align: center; -ms-flex-pack: center`. – Florian Wendelborn Dec 31 '16 at 04:16
add `text-align:center` for `inline-` elements .. such as text. – Sep 13 '18 at 23:34
Note that flexbox now has at least partial support in IE 10 and 11, and works for 97% of users according to [caniuse](https://caniuse.com/#feat=flexbox). I don't think browser support is an argument against it anymore. – Félix Adriyel Gagnon-Grenier Sep 12 '19 at 11:28
or simplified, without a css file :
some text
next line

– Vincent Gerris Oct 27 '22 at 22:27

score 35 · Answer 4 · edited Dec 12 '22 at 03:12

35

Add the line display: table-cell; to your CSS content for that div.

Only table cells support the vertical-align: middle;, but you can give that [table-cell] definition to the div...

A live example is here: http://jsfiddle.net/tH2cc/

div{
    height: 90px;
    width: 90px;
    text-align: center;
    border: 1px solid silver;
    display: table-cell; /* This says treat this element like a table cell */
    vertical-align:middle; /* Now we can center vertically like in a TD */
}

edited Dec 12 '22 at 03:12

Peter Mortensen

30,738
21
105
131

answered Apr 18 '11 at 13:28

FatherStorm

7,133
1
21
27

3

This doesn't work if `position` is absolute or fixed. See: http://jsfiddle.net/tH2cc/1636/ – Aaron Mason Jan 15 '18 at 01:11

score 24 · Answer 5 · edited Jul 01 '19 at 22:36

24

Give this CSS class to the targeted <div>:

.centered {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: red; /* Not necessary just to see the result clearly */
}

<div class="centered">This text is centered horizontally and vertically</div>

edited Jul 01 '19 at 22:36

Peter Mortensen

30,738
21
105
131

answered Sep 11 '17 at 12:41

Aminu Kano

2,595
1
24
26

score 23 · Answer 6 · edited Jul 01 '19 at 22:26

23

You can try very easy code for this:

  display: flex;
  align-items: center;
  justify-content: center;

.box{
  height: 90px;
  width: 90px;
  background: green;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="box">
  Lorem
</div>

Codepen link: http://codepen.io/santoshkhalse/pen/xRmZwr

edited Jul 01 '19 at 22:26

Peter Mortensen

30,738
21
105
131

answered Dec 16 '16 at 10:07

Santosh Khalse

12,002
3
36
36

score 20 · Answer 7 · edited Jul 01 '19 at 22:24

I always use the following CSS for a container, to center its content horizontally and vertically.

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;

See it in action here: https://jsfiddle.net/yp1gusn7/

score 19 · Answer 8 · edited Dec 12 '22 at 03:29

19

2020 Way

.parent{ 
  display: grid;
  place-items: center;
}

edited Dec 12 '22 at 03:29

Peter Mortensen

30,738
21
105
131

answered Jul 24 '20 at 04:06

WaysToGo

331
3
7

score 13 · Answer 9 · edited Dec 12 '22 at 03:24

You can use the flex property at the parent div and add the margin:auto property to the children items:

.parent {
    display: flex;
    /* You can change this to `row` if you want the items side by side instead of stacked */
    flex-direction: column;
}

/* Change the `p` tag to what your items child items are */
.parent p {
    margin: auto;
}

You can see more options of flex here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

score 11 · Answer 10 · edited Jul 01 '19 at 22:34

Approach 1

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}

<div>
  Hello, World!!
</div>

Approach 2

div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>

Approach 3

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

score 10 · Answer 11 · edited Dec 12 '22 at 03:30

10

Add the following code in the parent div

display: grid;
place-items: center;

edited Dec 12 '22 at 03:30

Peter Mortensen

30,738
21
105
131

answered Aug 18 '20 at 13:42

Codemaker2015

12,190
6
97
81

score 8 · Answer 12 · edited Dec 12 '22 at 03:41

8

Use:

# Parent
{
  display: table;
}

# Child
{
  display: table-cell;
  width: 100%; /* As large as its parent to center the text horizontally */
  text-align: center;
  vertical-align: middle; /* Vertically align this element on its parent */
}

edited Dec 12 '22 at 03:41

Peter Mortensen

30,738
21
105
131

answered Feb 22 '15 at 03:34

Narcisse Doudieu Siewe

629
5
15

6

How exactly is this different than the other answers posted? – Josh Crozier Feb 23 '15 at 00:58

score 5 · Answer 13 · edited Dec 09 '15 at 03:47

5

<div class="small-container">
    <span>Text centered</span>
</div>

<style>
.small-container {
    width:250px;
    height:250px;
    border:1px green solid;
    text-align:center;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.small-container span{
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
</style>

edited Dec 09 '15 at 03:47

josliber

43,891
12
98
133

answered Dec 09 '15 at 02:00

Arunkumar Maha

51
1
6

The syntax highlighting of `-moz-transform` and `-webkit-transform` is weird. It is probably due to the [new syntax highlighter](https://meta.stackexchange.com/questions/353983/goodbye-prettify-hello-highlight-js-swapping-out-our-syntax-highlighter). – Peter Mortensen Dec 12 '22 at 03:18

score 5 · Answer 14 · edited Jul 01 '19 at 22:39

5

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}

<div>
  Hello, World!!
</div>

edited Jul 01 '19 at 22:39

Peter Mortensen

30,738
21
105
131

answered Feb 20 '18 at 03:33

debasispaul

51
2
3

3

While this code snippet may solve the question, [including an explanation](http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Sudheesh Singanamalla Feb 20 '18 at 03:39

score 4 · Answer 15 · edited Dec 12 '22 at 03:28

4

GRID

.center {
    display: grid;
    justify-items: center;
    align-items: center;
}

.center {
    display: grid;
    justify-items: center;
    align-items: center;
}

.box {
    width: 200px;
    height: 100px;
    background: red;
}

<div class="box center">My text</div>

edited Dec 12 '22 at 03:28

Peter Mortensen

30,738
21
105
131

answered Apr 06 '20 at 18:06

Kamil Kiełczewski

85,173
29
368
345

score 3 · Answer 16 · edited Nov 19 '13 at 10:11

3

Adjusting line height to get the vertical alignment.

line-height: 90px;

edited Nov 19 '13 at 10:11

CloudyMarble

36,908
70
97
130

answered Nov 19 '13 at 09:53

Abhay

321
2
5

4

Not going to downvote because it _can_ be a solution, however this only works if you can guarantee single-line text... – dooleyo Apr 28 '14 at 18:24

score 3 · Answer 17 · edited Dec 12 '22 at 03:36

3

This is really simple code that works for me! It is just one line and your text will be centered horizontally.

.center-horizontally{
  justify-content: center;
}

<Card.Footer className="card-body-padding center-horizontally">
  <label className="support-expand-text-light">Call or email Customer Support to change</label>
</Card.Footer>

The output looks like this:

edited Dec 12 '22 at 03:36

Peter Mortensen

30,738
21
105
131

answered Mar 05 '20 at 02:42

Jeanne vie

518
6
12

score 2 · Answer 18 · edited Dec 12 '22 at 03:20

This works for me (tested OK!):

HTML:

<div class="mydiv">
    <p>Item to be centered!</p>
</div>

CSS:

.mydiv {
    height: 100%; /* Or other */
    position: relative;
}

.mydiv p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%); /* To compensate own width and height */
}

You can choose other values than 50%. For example, 25% to center at 25% of parent.

score 2 · Answer 19 · edited Dec 12 '22 at 03:34

You can try the following methods:

If you have a single word or one line sentence, then the following code can do the trick.

Have a text inside a div tag and give it an id. Define the following properties for that id.
```
id-name {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed red;
}
```
Note: Make sure the line-height property is same as the height of the division.

Image

But, if the content is more than one single word or a line then this doesn’t work. Also, there will be times when you cannot specify the size of a division in px or % (when the division is really small and you want the content to be exactly in the middle).
To solve this issue, we can try the following combination of properties.
```
id-name {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px dashed red;
}
```
Image

These 3 lines of code sets the content exactly in the middle of a division (irrespective of the size of the display). The "align-items: center" helps in vertical centering while "justify-content: center" will make it horizontally centered.

Note: Flex does not work in all browsers. Make sure you add appropriate vendor prefixes for additional browser support.

antelove · Answer 20 · 2017-10-12T09:32:51.543

2

.cell-row {display: table; width: 100%; height: 100px; background-color: lightgrey; text-align: center}
.cell {display: table-cell}
.cell-middle {vertical-align: middle}

<div class="cell-row">
  <div class="cell cell-middle">Center</div>
</div>

edited Oct 12 '17 at 09:32

answered Sep 27 '17 at 16:17

antelove

3,216
26
20

score 1 · Answer 21 · edited Jul 01 '19 at 22:30

1

<!DOCTYPE html>
<html>
  <head>
    <style>
      .maindiv {
        height: 450px;
        background: #f8f8f8;
        display: -webkit-flex;
        align-items: center;
        justify-content: center;
      }
      p {
        font-size: 24px;
      }
    </style>
  </head>

  <body>
    <div class="maindiv">
      <h1>Title</h1>
    </div>
  </body>
</html>

edited Jul 01 '19 at 22:30

Peter Mortensen

30,738
21
105
131

answered Mar 17 '17 at 05:25

Nikit Barochiya

971
11
14

score 1 · Answer 22 · edited Dec 12 '22 at 03:25

1

For me this was the best solution:

HTML:

<div id="outer">
    <img src="logo.png">
</div>

CSS:

#outer {
  position: fixed;
  top: 50%;
  left: 50%;
  /* Bring your own prefixes */
  transform: translate(-50%, -50%);
}

edited Dec 12 '22 at 03:25

Peter Mortensen

30,738
21
105
131

answered Aug 14 '19 at 09:58

Bence Végert

728
10
12

score 0 · Answer 23 · edited Dec 12 '22 at 03:32

0

Apply style:

position: absolute;
top: 50%;
left: 0;
right: 0;

Your text would be centered irrespective of its length.

edited Dec 12 '22 at 03:32

Peter Mortensen

30,738
21
105
131

answered Apr 26 '17 at 13:08

techloris_109

547
5
13

score 0 · Answer 24 · edited Jul 01 '19 at 22:38

0

This worked for me:

.center-stuff{
    text-align: center;
    vertical-align: middle;
    line-height: 230px; /* This should be the div height */
}

edited Jul 01 '19 at 22:38

Peter Mortensen

30,738
21
105
131

answered Feb 02 '18 at 11:15

Ger Mc

630
3
11
22

score -1 · Answer 25 · edited Dec 12 '22 at 03:37

-1

This should be the right answer. Cleanest and simplest:

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

edited Dec 12 '22 at 03:37

Peter Mortensen

30,738
21
105
131

answered Sep 15 '16 at 20:01

Mike Barwick

6,288
6
51
76

What happens if `transform: translateY(-50%);` is not included – Hassan Baig Dec 03 '20 at 13:02

score -1 · Answer 26 · answered Jul 07 '18 at 14:00

-1

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <div style ="text-align: center;">Center horizontal text</div>
        <div style ="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);">Center vertical text</div>
    </body>
</html>

answered Jul 07 '18 at 14:00

1

This is good clean code. Although, you could add ID to your div tags, so that you can use them later on if necessary. – Amir Md Amiruzzaman Jul 07 '18 at 14:02
3

did you read previous answers? can you tell what this answer add to the previous ones? – Temani Afif Jul 07 '18 at 14:08
1

@AmirMdAmiruzzaman can you tell us what is the *cleanest* part of this code :) ... I see inline styles which is not good ... also adding ID is not a good idea too, we need Classes – Temani Afif Jul 07 '18 at 14:09
1

**Duplicate of** Approach 1 of Josh's answer – Munim Munna Jul 07 '18 at 15:31

score -2 · Answer 27 · answered Jul 04 '18 at 20:12

Try the following example. I have added examples for each category: horizontal and vertical

<!DOCTYPE html>
<html>
    <head>
        <style>
            #horizontal
            {
                text-align: center;
            }
            #vertical
            {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
            }
         </style>
    </head>
    <body>
         <div id ="horizontal">Center horizontal text</div>
         <div id ="vertical">Center vertical text</div>
    </body>
</html>

the question is about centring horizontally AND vertically also this solution is already provided before — Temani Afif, Jul 07 '18 at 14:16

How can I center text (horizontally and vertically) inside a div block?

27 Answers27

Update for 2020:

Update for 2016 / 2017:

To shrink-wrap the width:

Common techniques as of 2014:

Approach 1 - `transform` `translateX`/`translateY`:

Approach 2 - Flexbox method:

Approach 3 - `table-cell`/`vertical-align: middle`:

Approach 4 - Absolutely positioned `50%` from the top with displacement:

Approach 5 - The `line-height` method (Least flexible - not suggested):

Approach 1

Approach 2

Approach 3

GRID

Linked

Related

How can I center text (horizontally and vertically) inside a div block?

27 Answers27

Update for 2020:

Update for 2016 / 2017:

To shrink-wrap the width:

Common techniques as of 2014:

Approach 1 - transform translateX/translateY:

Approach 2 - Flexbox method:

Approach 3 - table-cell/vertical-align: middle:

Approach 4 - Absolutely positioned 50% from the top with displacement:

Approach 5 - The line-height method (Least flexible - not suggested):

Approach 1

Approach 2

Approach 3

GRID

Linked

Related

Approach 1 - `transform` `translateX`/`translateY`:

Approach 3 - `table-cell`/`vertical-align: middle`:

Approach 4 - Absolutely positioned `50%` from the top with displacement:

Approach 5 - The `line-height` method (Least flexible - not suggested):