css div 将多行文本垂直和水平居中，并带有背景图片

Question

我搜索了 Whosebug，但找不到有效的解决方案。

似乎很难在 div 中垂直和水平居中。

我正在使用这个 css:

.title {
    font-family: "Book Antiqua", "Palatino Linotype", Palatino, serif;
    font-size: 400%;
}

.subtitle {
    font-family: "Book Antiqua", "Palatino Linotype", Palatino, serif;
    font-size: 150%;
}

.subnote {
    font-family: "Book Antiqua", "Palatino Linotype", Palatino, serif;
    font-size: 75%;
}

.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.innie {
    width: 1000px;
    height: 515px;
    background-image: url("bkgrnd3.png");
    position:absolute;
    left:50%;
    top:50%;
    margin: -257px 0 0 -500px;
    text-align: center;
}

和这个 html:

<!DOCTYPE html>
<html>
    <head>
        <title>Timothy Eldon Official</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="eldon.css">
    </head>
    <body>
        <div class="outer">
            <div class="middle">
                <div class="innie">
                    <span class="title">
                        Timothy Eldon
                    </span>
                    <br/>
                    <span class="subtitle">
                        Author
                    </span>
                    <br/>
                    <span class="subnote">
                        (amateur)
                    </span>
                </div>
            </div>
        </div>
    </body>
</html>

它使页面上的所有内容相对居中，但我无法使文本垂直居中。

好像有很多点子，但是我试了好几个都不行。

Answer 1

这里很简单DEMO..希望对你有帮助。

HTML

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

CSS

div {
  display: table;
  width: 250px;
  height: 500px;
  text-align: center;
  border: 1px solid red;
}

span {
  display: table-cell;
  vertical-align: middle;

}

Answer 2

您有一些不必要的 css，例如 .innie 上的 margin: -257px 0 0 -500px; left:50%; top:50%; width: 1000px; height: 515px;，这会破坏您的居中对齐。

我想这就是你的目的。

已更新

CSS

.title {
    font-family: "Book Antiqua", "Palatino Linotype", Palatino, serif;
    font-size: 400%;
}

.subtitle {
    font-family: "Book Antiqua", "Palatino Linotype", Palatino, serif;
    font-size: 150%;
}

.subnote {
    font-family: "Book Antiqua", "Palatino Linotype", Palatino, serif;
    font-size: 75%;
}

.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
    background:url('https://placeimg.com/600/300/any')no-repeat;
    background-position: center;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.innie {
    text-align: center;
}

jsFiddle 演示 - https://jsfiddle.net/8dphnor5/

Answer 3

flex 可以帮助你:

.title {
  font-family: "Book Antiqua", "Palatino Linotype", Palatino, serif;
  font-size: 400%;
}
.subtitle {
  font-family: "Book Antiqua", "Palatino Linotype", Palatino, serif;
  font-size: 150%;
}
.subnote {
  font-family: "Book Antiqua", "Palatino Linotype", Palatino, serif;
  font-size: 75%;
}
.outer {} .middle {} .innie {
  width: 1000px;
  height: 515px;
  background-image: url("http://lorempixel.com/1000/515");
  text-align: center;
  text-shadow: 0 0 1px white;
}
html,
body {
  height: 100%;/* min-height is buggie in IE */
}
body,
.innie {
  display: flex;
  flex-direction: column;
  /* now centers things in X,Y axis */
  align-items: center;
  justify-content: center;
}

<div class="outer">
  <div class="middle">
    <div class="innie">
      <span class="title">
                        Timothy Eldon
                    </span>
      <br/>
      <span class="subtitle">
                        Author
                    </span>
      <br/>
      <span class="subnote">
                        (amateur)
                    </span>
    </div>
  </div>
</div>

css div 将多行文本垂直和水平居中，并带有背景图片

css div center multi-line text vertically and horizontally with a background image

html

css

image

center