Various ways to place characters in the center with CSS

When creating buttons and headings with CSS, I think there are many opportunities to center the text inside the box. I also had an opportunity to write CSS lately. For my notes, I wrote it down here how to place where you want it.

Centering with text-align and padding

<div class="wrap pattern-1 mgb-20"> 
    centered 
 </div>
.wrap.pattern-1{
  text-align:center;
  padding:20px 0;
}

This is the method to center the characters and add same size padding on the top and bottom. The problem is that the height of elements and amount of characters are affected by font-size and the number of lines.

Every methods I noted on this article obtain same outcome like above. Therefore, I do not show same image of result for short.

Centering with height and line-height

.wrap.pattern-2{
  text-align:center;
  height:60px;
  line-height:60px;
}

This method set the height to fix the height and also set the same value of line-heigh after centering characters. The problem with this method is that it can only be used when the text is on one line. This method is easy for elements such as buttons that have a fixed text on one line. As an application, it is possible to express the character in the circle if you make height and width the same size and border-radius 50%.

Centering with table layout and vertical-align

.wrap.pattern-3{
  height:60px;
  display:table;
  text-align:center;
}

.wrap.pattern-3 div{
  display:table-cell;
  vertical-align:middle;
}

Enclose the elements which you want to place it in the center.
Set height to the parent element and set display: table; after centering characters. And then, set display: table-cell; to the child element, and align it vertically-align: middle; in the center of the top and bottom. However, if the height of parent element is larger than child element, the parent element is affected size of child element.

Centering with position and translate

.wrap.pattern-4{
  height:60px;
  text-align:center;
  position:relative;
}

.wrap.pattern-4 div{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:100%;
}

Enclose the elements which you want to place it in the center.
Set height to the parent element and set position: relative; after centering characters.
Place child element to the position of top: 50%; left: 50% with position: absolute;
At this time, the position of the child element is such that “the upper right part of the child element” comes to the center of the parent element.
To solve this, you need to adjust the position with transform: translate (-50%, -50%) ;.
Even if the child element is larger than the height of the parent element, it will not be affected with this method. (Looks like sticking out.)

Centering with flexbox

.wrap.pattern-5{
  height:60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

It can be also centering with Flexbox.
Set display: flex; to the parent element and position it in the vertical center with justify-content: center; and place it in the horizontal center with align-items: center.
If you have several child elements, it can be arrange vertically with flex-direction: column;

Centering with CSS Grid layout

.wrap.pattern-6{
  height:60px;
  display: grid;
  place-items: center;
}

Although this is not compatible method with IE11, it is possible to place element in the center of the top, bottom, right and left with CSS Grid.
The code is clean and easy because it can be implemented just by specifying two lines: display: grid; place-items: center ;.

It depends on the project, device and design which type of method is better, however I think that you can handle it flexibly by knowing various type of methods !!

I would be happy if this note was useful for you. Happy coding !!