4

How can I center the text (p) vertically and horizontally inside a div (.item)?

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        .wrapper {
            width: auto;
            height: 10em;
            background-color: red;
            position: relative;
        }
        .item {
            width: 4em;
            height: 4em;
            background-color: black;
            position: absolute;
            display: inline-block;
            color: white;
        }
        .item p {
            text-align: center;
            vertical-align: middle;
        }
        #top-right {
            right: 0em;
        }
        #center {
            top: calc(50% - 2em);
            right: calc(50% - 2em);
        }
        #bottom-left {
            bottom: 0em;
            left: 0em;
        }
        #bottom-right {
            right: 0em;
            bottom: 0em;
        }
    </style>
</head>
<body>
    <header></header>
    <main>
        <div class="wrapper">
            <div class="item" id="top-left"><p>Top Left</p></div>
            <div class="item" id="top-right"><p>Top Right</p></div>
            <div class="item" id="center"><p>Center</p></div>
            <div class="item" id="bottom-left"><p>Bottom Left</p></div>
            <div class="item" id="bottom-right"><p>Bottom Right</p></div>
        </div>
    </main>
    <footer></footer>
</body>
</html>

It's ok to use calc (because I read that this function isn't supported in some browers)? Or there is another way to center the element #center in the div without calc()?

Marco Canora
  • 335
  • 2
  • 15

4 Answers4

4

In your structure display:table and display:table-cell would not work because you have used position absolute in .item.

Use below css in #center which is supported in all broswers.

#center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  //top: calc(50% - 2em);
  //right: calc(50% - 2em);
}

example : https://jsfiddle.net/vzk5arxe/2/

Gaurav Aggarwal
  • 9,809
  • 6
  • 36
  • 74
2

Another method.

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

Reference: http://colintoh.com/blog/display-table-anti-hero

Giri
  • 565
  • 2
  • 9
1

You can achieve that by using display: flex. I have added below properties to your .item

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


Updated code snippet:

.wrapper {
  width: auto;
  height: 10em;
  background-color: red;
  position: relative;
}
.item {
  width: 4em;
  height: 4em;
  background-color: black;
  position: absolute;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
#top-right {
  right: 0em;
}
#center {
  top: calc(50% - 2em);
  right: calc(50% - 2em);
}
#bottom-left {
  bottom: 0em;
  left: 0em;
}
#bottom-right {
  right: 0em;
  bottom: 0em;
}
<header></header>
<main>
  <div class="wrapper">
    <div class="item" id="top-left">
      <p>Top Left</p>
    </div>
    <div class="item" id="top-right">
      <p>Top Right</p>
    </div>
    <div class="item" id="center">
      <p>Center</p>
    </div>
    <div class="item" id="bottom-left">
      <p>Bottom Left</p>
    </div>
    <div class="item" id="bottom-right">
      <p>Bottom Right</p>
    </div>
  </div>
</main>
<footer></footer>
Pugazh
  • 9,453
  • 5
  • 33
  • 54
0

You can center a text inside a parent div using the grid layout which is widely supported now.

.parent-div {
    display: grid;
    place-items: center;
    text-align: center;
}
I hope I helped!
Blanklob
  • 28
  • 2