How to center a single character both vertically and horizontally in a square div

Setting the line-height to the height of the container should do it.

text-align: center;
line-height:20px;
width:20px;
height:20px;

Example here: http://codepen.io/Jedidiah/pen/rLfHz

Use display:table-cell and vertical-align:middle and text-align:center. Like this in your CSS:

#center{
    width:100px;height:100px;
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

The display:table-cell is required to be able to use vertical-align to center content in the on the div ( don't ask me why someone decided to make it like that :) ).

See this JSFiddle.

this question is a bit old but it's the first answer when you search "center single letter in square css"

so in 2018 you can simply do

#center {

   width: 0;
   height: 0
   display: flex;
   justify-content: center;
   align-items: center;
}

• justify-content: center align horizontally
• align-items: center align vertically

Note that it will works regardless of the shape of the div, could be a rectangle.