Css Div Center Multi-line Text Vertically And Horizontally With A Background Image

I have searched Stackoverflow and cannot find a solution that works. Seems that centring vertically AND horizontally in a div is hard. I'm using this css: .title { font-family:

Solution 1:

You have some unnecessary css such as margin: -257px 0 0 -500px; left:50%; top:50%; width: 1000px; height: 515px; on .innie , which is throwing off your center alignment.

I think this, what you are going for.

UPDATED

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 Demo - https://jsfiddle.net/8dphnor5/

Solution 2:

Here is simple DEMO.. hope it helps.

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;

}

Solution 3:

flex can help you :

.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: 001px 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;
}

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