Question

如何将文本（p）垂直和水平居中在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>

可以使用calc（因为我读过某些浏览器不支持此功能）？或者还有另一种方法可以将元素#center置于div中而不使用calc（）？

Answer 1

在您的结构中，display:table和display:table-cell无效，因为您在.item中使用了绝对位置。

在#center中使用以下css，这是所有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);
}

示例：https://jsfiddle.net/vzk5arxe/2/

Answer 2

另一种方法。

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

参考：http://colintoh.com/blog/display-table-anti-hero

Answer 3

您可以使用display: flex来实现这一目标。我已将以下属性添加到您的.item

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

更新了代码段：

.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>

Answer 4

您可以使用现在广泛支持的网格布局将文本居中放置在父 div 中。

.parent-div {
    display: grid;
    place-items: center;
    text-align: center;
}

我希望我有所帮助！

div中的中心文本和calc（）怀疑

4 个答案:

您可以使用现在广泛支持的网格布局将文本居中放置在父 div 中。