Vertical And Horizontal Alignment Of Text With CSS

I'm trying to align a text, horizontally and vertically, inside a div box (with background color) but I'm not being able to do it. I've searched online and margin: auto, text-align

Solution 1:

Here is a common approach used for vertical/horizontal centering.

BASIC EXAMPLE HERE

div {
    background: red;
    width:100px;
    height: 100px;
    display:table;
}
div > span {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

Basically, the parent element's display is changed to table. Add in a child element, in this case a span element to wrap the text. The span should have the properties display:table-cell/vertical-align:middle for vertical centering. Then text-align:center is simply for horizontal centering.

Here is an example using the styling you had.

Solution 2:

You can change just your CSS to this (no HTML changes):

div{
  background: red;
  bottom: 0;
  height: 100px;
  left: 0;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  text-align: center;
  line-height: 100px;
}

The text-align is self-explanatory. The line-height forces the text to the center by matching the height of a single line to that of the div. You will have to adjust it to your needs each time.

JSFiddle

Solution 3:

There are different ways. Here is one:

HTML:

<div>
    <span>magix!</span>
</div>

CSS:

div {
    text-align:center;
    display:table;
}
span { 
    display: table-cell;
    vertical-align:middle;
}

Fiddle