CODEWITHSUNDEEP
css
kjo
kjo

Reputation: 35331

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

I want to center within a square div an arbitrary character. I admit that this sounds like a very simple task, but nothing I've tried works (and I've tried a bazillion things!)1.

For concreteness, let's say that the div has height and width equal to 20ex, and let's say that the single character is the so-called "multiplication sign": ✕, nice and symmetric. I want this character to be positioned inside the 20ex-by-20ex square div such that the point where the two strokes cross is dead-center, both vertically and horizontally, within the div.

EDIT:

I tried the answers I've received so far, here (see code below). The solutions given by Jedidiah and by Ashok Kumar Gupta (second and third divs) produce pretty similar results, but (maybe I'm seeing things), the ✕ in the third div is just a hair above the vertical center.

html:

<div id="div0" class="square-div">
    <div class="the-char">&#x2715;</div>
</div>

<div id="div1" class="square-div">
    <div class="the-char">&#x2715;</div>
</div>

<div id="div2" class="square-div">
<p class="the-char">&#x2715;</p></div>

css:

.square-div{
    height:5ex;
    width:5ex;
    float:left;
}
.the-char{
    color:white;
}
#div0 {
    background-color:#dc4916;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}
#div1 {
    background-color:#555555;
    line-height:5ex;
    text-align:center;
}
#div2 {
    background-color:#a00;
    display:table;
}
#div2 .the-char{
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

1I have learned that no matter how mind-numbingly straightforward a layout task may appear, it can still take me hours and hours and hours to figure out the CSS to achieve it.

Upvotes: 28

Views: 16119

Answers (6)

allan.simon
allan.simon

Reputation: 4316

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.

Upvotes: 6

Simon Hi
Simon Hi

Reputation: 3016

It is just impossible using css only to center a single character vertically and horizontally in a div because it depends of the font the browser will use to render the character.

For those who just want to center a "X", it is safer to make the "X" transparent, create :before and :after pseudo-elements, give them a thin width and a background that has the same color as the initial "X", then rotate them of + or - 45deg.

HTML code:

<div>X</div>

CSS code:

* {
  box-sizing: border-box;
}

div {
  font-size: 2em;
  position: relative;
  border: 1px solid black;
  width: 2em;
  height: 2em;
  color: transparent;
}

div:before,
div:after {
  content: "X";
  display: block;
  z-index: 1;
  position: absolute;
  top: 0.25em;
  bottom: 0.25em;
  left: 0.9em;
  right: 0.9em;
  background-color: black;
}

div:before {
  transform: rotate(45deg);
}

div:after {
  transform: rotate(-45deg);
}

Here is a jsfiddle: https://jsfiddle.net/z4pmu7r9/

Upvotes: 4

Raphael Rafatpanah
Raphael Rafatpanah

Reputation: 20007

This question is a bit old, but after noticing OP's edit:

I tried the answers I've received so far, here. The solutions given by Jedidiah and by Ashok Kumar Gupta (second and third divs) produce pretty similar results, but (maybe I'm seeing things), the ✕ in the third div is just a hair above the vertical center.

I wanted to post that if you used &times; instead of ✕, the centering looks much better.

https://codepen.io/persianturtle/pen/zPKbRj

Upvotes: 2

Ashok Kumar Gupta
Ashok Kumar Gupta

Reputation: 974

Answer to your question:

<div style="width: 20em;height: 20em; background: red;display: table;">
<p style="display: table-cell;text-align: center;vertical-align: middle;">X</p></div>

Note: background: red; is only for visualization.

:)

Upvotes: 1

Jedidiah
Jedidiah

Reputation: 1194

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

Upvotes: 19

Robin
Robin

Reputation: 7894

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.

Upvotes: 6

Related Questions