I have a basic html markup, where i am trying to use minimal html wrappers to achieve the design.
The button on the bottom should't align, it should always stay in the bottom.
So my goal is without adding more html wrappers, using flex, force a flex item(button) to drop to the next line. and the block title stay next to the image.
You can see what i mean checking it on mobile breakpoints.
Here are the screenshots with flex-wrap: wrap
And here is with flex-wrap: nowrap
As you see, in first example button is in the bottom as it should be, but block title is dropped to the next line, And in the second example (flex-wrap: wrap) block title is positioned correct, but the button is not in the bottom.
Here is the sandbox link and code example
body {
margin: 0;
padding: 0;
}
.container {
background-color: grey;
overflow: auto;
padding: 20px;
align-items: center;
display: flex;
position: relative;
column-gap: 15px;
flex-wrap: wrap;
/* //try nowrap */
width: 100%;
}
.logo-image {
align-self: flex-start;
}
.headline {
color: white;
}
.text {
color: white;
font-size: 16px;
margin-bottom: 20px;
}
.btn {
display: flex;
width: 100%;
}
button {
align-items: center;
background-color: black;
color: white;
flex: 0 0 100%;
justify-content: center;
margin: 0;
}
<div class="container">
<img src="download.png" width="50px" class="logo-image" alt="img" />
<span class="content">
<h4 class="headline">
Block Title
</h4>
<p class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
aliquid sit, cupiditate
</p>
</span>
<div class="btn">
<button>link</button>
</div>
</div>
Any help will be appreciated
You can make your span a block level element and set flex-grow to 1 but set flex-basis to something small, like 50% so it tries to be 50% of the width but will grow to fit the width. It then means when shrinking it will try to stay on the same line.
body {
margin: 0;
padding: 0;
}
.container {
background-color: grey;
overflow: auto;
padding: 20px;
align-items: center;
display: flex;
position: relative;
column-gap: 15px;
flex-wrap: wrap;
width: 100%;
}
/* added this --v */
.content {
display: block;
flex: 1 0 50%;
}
.logo-image {
align-self: flex-start;
}
.headline {
color: white;
}
.text {
color: white;
font-size: 16px;
margin-bottom: 20px;
}
.btn {
display: flex;
width: 100%;
}
button {
align-items: center;
background-color: black;
color: white;
flex: 0 0 90%;
justify-content: center;
margin: 0;
}
<div class="container">
<img src="https://www.fillmurray.com/200/200" width="50px" class="logo-image" alt="img" />
<span class="content">
<h4 class="headline">
Block Title
</h4>
<p class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
aliquid sit, cupiditate
</p>
</span>
<div class="btn">
<button>link</button>
</div>
</div>
I am trying to center my tabs content vertically, but when I add the CSS style display:inline-flex, the horizontal text-align disappears.
How can I make both text alignments x and y for each of my tabs?
* { box-sizing: border-box; }
#leftFrame {
background-color: green;
position: absolute;
left: 0;
right: 60%;
top: 0;
bottom: 0;
}
#leftFrame #tabs {
background-color: red;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 25%;
}
#leftFrame #tabs div {
border: 2px solid black;
position: static;
float: left;
width: 50%;
height: 100%;
text-align: center;
display: inline-flex;
align-items: center;
}
<div id=leftFrame>
<div id=tabs>
<div>first</div>
<div>second</div>
</div>
</div>
Approach 1 - transform translateX/translateY:
Example Here / Full Screen Example
In supported browsers (most of them), you can use top: 50%/left: 50% in combination with translateX(-50%) translateY(-50%) to dynamically vertically/horizontally center the element.
.container {
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
<div class="container">
<span>I'm vertically/horizontally centered!</span>
</div>
Approach 2 - Flexbox method:
Example Here / Full Screen Example
In supported browsers, set the display of the targeted element to flex and use align-items: center for vertical centering and justify-content: center for horizontal centering. Just don't forget to add vendor prefixes for additional browser support (see example). Remember the parent container will also need height (in this case, 100%).
html, body, .container {
height: 100%;
}
.container {
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center;
}
<div class="container">
<span>I'm vertically/horizontally centered!</span>
</div>
Approach 3 - table-cell/vertical-align: middle:
Example Here / Full Screen Example
In some cases, you will need to ensure that the html/body element's height is set to 100%.
For vertical alignment, set the parent element's width/height to 100% and add display: table. Then for the child element, change the display to table-cell and add vertical-align: middle.
For horizontal centering, you could either add text-align: center to center the text and any other inline children elements. Alternatively, you could use margin: 0 auto, assuming the element is block level.
html, body {
height: 100%;
}
.parent {
width: 100%;
height: 100%;
display: table;
text-align: center;
}
.parent > .child {
display: table-cell;
vertical-align: middle;
}
<section class="parent">
<div class="child">I'm vertically/horizontally centered!</div>
</section>
Approach 4 - Absolutely positioned 50% from the top with displacement:
Example Here / Full Screen Example
This approach assumes that the text has a known height - in this instance, 18px. Just absolutely position the element 50% from the top, relative to the parent element. Use a negative margin-top value that is half of the element's known height, in this case - -9px.
html, body, .container {
height: 100%;
}
.container {
position: relative;
text-align: center;
}
.container > p {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin-top: -9px;
}
<div class="container">
<p>I'm vertically/horizontally centered!</p>
</div>
Approach 5 - The line-height method (Least flexible - not suggested):
Example Here
In some cases, the parent element will have a fixed height. For vertical centering, all you have to do is set a line-height value on the child element equal to the fixed height of the parent element.
Though this solution will work in some cases, it's worth noting that it won't work when there are multiple lines of text - like this.
.parent {
height: 200px;
width: 400px;
background: lightgray;
text-align: center;
}
.parent > .child {
line-height: 200px;
}
<div class="parent">
<span class="child">I'm vertically/horizontally centered!</span>
</div>
If CSS3 is an option (or you have a fallback) you can use transform:
.center {
right: 50%;
bottom: 50%;
transform: translate(50%,50%);
position: absolute;
}
Unlike the first approach above, you don't want to use left:50% with the negative translation because there's an overflow bug in IE9+. Utilize a positive right value and you won't see horizontal scrollbars.
Here is how to use two simple flexbox properties to center n divs on the two axes:
Set the height of your container: Here the body is set to be at least 100 viewport height.
align-items: center; will center the blocks vertically if flex direction is row else horizontally if flex direction is column
justify-content: space-around; will distribute the free space vertically if flex direction is row else horizontally if flex direction is column around the div elements
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: space-around;
}
<div>foo</div>
<div>bar</div>
The best way to center a box both vertically and horizontally, is to use two containers :
The outher container :
should have display: table;
The inner container :
should have display: table-cell;
should have vertical-align: middle;
should have text-align: center;
The content box :
should have display: inline-block;
should adjust the horizontal text-alignment, unless you want text to be centered
Demo :
body {
margin : 0;
}
.outer-container {
display: table;
width: 80%;
height: 120px;
background: #ccc;
}
.inner-container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-content {
display: inline-block;
text-align: left;
background: #fff;
padding : 20px;
border : 1px solid #000;
}
<div class="outer-container">
<div class="inner-container">
<div class="centered-content">
Center this!
</div>
</div>
</div>
See also this Fiddle!
Centering in the middle of the page:
To center your content in the middle of your page, add the following to your outer container :
position : absolute;
width: 100%;
height: 100%;
Here's a demo for that :
body {
margin : 0;
}
.outer-container {
position : absolute;
display: table;
width: 100%;
height: 100%;
background: #ccc;
}
.inner-container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-content {
display: inline-block;
text-align: left;
background: #fff;
padding : 20px;
border : 1px solid #000;
}
<div class="outer-container">
<div class="inner-container">
<div class="centered-content">
Center this!
</div>
</div>
</div>
See also this Fiddle!
CSS Grid: place-items
Finally, we have place-items: center for CSS Grid to make it easier.
HTML
<div class="parent">
<div class="to-center"></div>
</div>
CSS
.parent {
display: grid;
place-items: center;
}
Output:
html,
body {
height: 100%;
}
.container {
display: grid;
place-items: center;
height: 100%;
}
.center {
background: #5F85DB;
color: #fff;
font-weight: bold;
font-family: Tahoma;
padding: 10px;
}
<div class="container">
<div class="center" contenteditable>I am always super centered within my parent</div>
</div>
Run this code snippet and see a vertically and horizontally aligned div.
html,
body,
.container {
height: 100%;
width: 100%;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
.mydiv {
width: 80px;
}
<div class="container">
<div class="mydiv">h & v aligned</div>
</div>
.align {
display: flex;
width: 400px;
height: 400px;
border: solid 1px black;
align-items: center;
justify-content: space-around;
}
.align div:first-child {
width: 20px;
height: 20px;
background-color: red;
position: absolute;
}
.align div {
width: 20px;
height: 20px;
background-color: blue;
}
<div class='align'>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
First child will be aligned vertically and horizontally at center
Source Link
Method 1) Display type flex
.child-element{
display: flex;
justify-content: center;
align-items: center;
}
Method 2) 2D Transform
.child-element {
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
position: absolute;
}
See other methods here
to center the Div in a page check the fiddle link
#vh {
border-radius: 15px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
padding: 25px;
width: 200px;
height: 200px;
background: white;
text-align: center;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
<div id="vh">Div to be aligned vertically</div>
Update
Another option is to use flex box check the fiddle link
.vh {
background-color: #ddd;
height: 200px;
align-items: center;
display: flex;
}
.vh > div {
width: 100%;
text-align: center;
vertical-align: middle;
}
<div class="vh">
<div>Div to be aligned vertically</div>
</div>
Below is the Flex-box approach to get desired result
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Flex-box approach</title>
<style>
.tabs{
display: -webkit-flex;
display: flex;
width: 500px;
height: 250px;
background-color: grey;
margin: 0 auto;
}
.f{
width: 200px;
height: 200px;
margin: 20px;
background-color: yellow;
margin: 0 auto;
display: inline; /*for vertically aligning */
top: 9%; /*for vertically aligning */
position: relative; /*for vertically aligning */
}
</style>
</head>
<body>
<div class="tabs">
<div class="f">first</div>
<div class="f">second</div>
</div>
</body>
</html>
Another approach is to use table:
<div style="border:2px solid #8AC007; height:200px; width:200px;">
<table style="width:100%; height:100%">
<tr style="height:100%">
<td style="height:100%; text-align:center">hello, multiple lines here, this is super long, and that is awesome, dude</td>
</tr>
</table>
</div>
Grid css approach
#wrapper {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}
.main {
background-color: #444;
}
<div id="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box main"></div>
</div>
Need to follow following New and easy solution:
.centered-class {
align-items: center;
display: flex;
justify-content: center;
width: 100vw;
height: 100vh;
}
<div class="centered-class">
I'm in center vertically and horizontally.
</div>
The simplest and cleanest solution for me is using the CSS3 property "transform":
.container {
position: relative;
}
.container a {
position: absolute;
top: 50%;
transform: translate(0,-50%);
}
<div class="container">
Hello world!
</div>
In order to vertically and horizontally center an element we can also use below mentioned properties.
This CSS property aligns-items vertically and accepts the following values:
flex-start: Items align to the top of the container.
flex-end: Items align to the bottom of the container.
center: Items align at the vertical center of the container.
baseline: Items display at the baseline of the container.
stretch: Items are stretched to fit the container.
This CSS property justify-content , which aligns items horizontally and accepts the following values:
flex-start: Items align to the left side of the container.
flex-end: Items align to the right side of the container.
center: Items align at the center of the container.
space-between: Items display with equal spacing between them.
space-around: Items display with equal spacing around them.
Just make top,bottom, left and right to 0.
<html>
<head>
<style>
<div>
{
position: absolute;
margin: auto;
background-color: lightblue;
width: 100px;
height :100px;
padding: 25px;
top :0;
right :0;
bottom:0;
left:0;
}
</style>
</head>
<body>
<div> I am in the middle</div>
</body>
</html>
You can achieve this using CSS (your element display:inline-grid + grid-auto-flow: row; ) Grid and Flex Box ( parent element display:flex;),
See below snippet
#leftFrame {
display: flex;
height: 100vh;
width: 100%;
}
#tabs {
display: inline-grid;
grid-auto-flow: row;
grid-gap: 24px;
justify-items: center;
margin: auto;
}
html,body {
margin:0;
padding:0;
}
<div>
<div id=leftFrame>
<div id=tabs>
<div>first</div>
<div>second</div>
</div>
</div>
</div>
This should works
.center-div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
}
<div class="center-div">Center Div</div>
If you prefer it without flexbox, grid, table or vertical-align: middle;
You can do:
HTML
<div class="box">
<h2 class="box__label">square</h2>
</div>
CSS
.box {
box-sizing: border-box;
width: 100px;
height: 100px;
text-align: center;
border: 1px solid black;
}
.box__label {
box-sizing: border-box;
display: inline-block;
transform: translateY(50%);
text-align: center;
border: 1px solid black;
}
If it's only about text aligning it's simple. Just use this:
vertical-align: middle; /* vertical centering*/
text-align: center; /* horizontal centering*/
Parent styling is not needed.
In some cases when the parent has some style properties it may affect the child, where this will not work properly.
Approach 6
/*Change units to "%", "px" or whatever*/
#wrapper{
width: 50%;
height: 70vh;
background: rgba(0,0,0,.5);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
#left{
width: 50%;
height: 50vh;
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
background: red;
}
#right{
width: 50%;
height: 50vh;
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto;
background: green;
}
.txt{
text-align: center;
line-height: 50vh;
}
<div id="wrapper">
<div id="left" class="txt">Left</div>
<div id="right" class="txt">Right</div>
</div>
.container{
width: 50%; //Your container width here
height: 50%; //Your container height here
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
The easiest way of centering a div both vertically and horizontally is as follows:
<div style="display: table; width: 200px; height: 200px; border: 1px solid black;">
<div style="display: table-cell; vertical-align: middle; text-align: center;">
Text Here
</div>
</div>
One More Example:
.parent {
display: table;
width: 100%;
height: 100%;
}
.child {
display: table-cell;
vertical-align: middle;
text-align: center;
}
<div class="parent">
<div class="child">
<h4><u>SERVICE IN BANGLADESH FLEET RESERVE <br> AND <br> RE-ENGAGEMENT ORDER FOR DEFENCE SERVICE</u></h4>
</div>
</div>
I see this the shortest and easiest way. However it depends on the element width and height. So feel free to adjust more the percentages on translate(50%, 50%);.
.divContainer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transform: translate(50%, 50%);
}
<div class="divContainer">I am centered</div>
The simplest flexbox approach:
The easiest way how to center a single element vertically and horizontally is to make it a flex item and set its margin to auto:
If you apply auto margins to a flex item, that item will automatically
extend its specified margin to occupy the extra space in the flex
container...
.flex-container {
height: 150px;
display: flex;
}
.flex-item {
margin: auto;
}
<div class="flex-container">
<div class="flex-item">
This should be centered!
</div>
</div>
This extension of margins in each direction will push the element exactly to the middle of its container.
In the case where I was trying to vertically align text content inside button::before and button::after, I was able to get it working using vertical-align: text-top.
button::after {
vertical-align: text-top;
}
I use this CSS code:
display: grid;
justify-content: center;
align-items: center;
The source is CSS-Tricks
This is a related problem that people might come to this page when searching: When I want to centre a div for a "waiting.." 100px square animated gif, I use:
.centreDiv {
position: absolute;
top: -moz-calc(50vh - 50px);
top: -webkit-calc(50vh - 50px);
top: calc(50vh - 50px);
left: -moz-calc(50vw - 50px);
left: -webkit-calc(50vw - 50px);
left: calc(50vw - 50px);
z-index: 1000; /* whatever is required */
}
So I wanted to make some overlapping content using flex-box. On wide screen flex-direction is set to row, but on smaller screens I wanted to change it to column.
body {
min-height: 100vh;
background-color: #d6bd9e;
display: flex;
align-items: center;
justify-content: center;
}
.container {
width: 90%;
max-width: 960px;
display: flex;
justify-content: center;
align-items: center;
}
.left {
border: 2px solid green;
flex: 1 40%;
width: 40%;
height: 30rem;
background: url("https://images.unsplash.com/photo-1512641406448-6574e777bec6?ixlib=rb- 1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHw%3D&w=1000&q=80") no-repeat;
background-size: cover;
border-radius: 8px;
}
.right {
min-height: 20rem;
flex: 1 50%;
background-color: #4d6d52;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
padding: 1.5em;
border-radius: 8px;
margin-left: -4em;
}
#media(max-width: 500px) {
.container {
width: 100%;
flex-direction: column;
}
.left {
width: 90%;
}
.right {
min-height: 14rem;
margin: 0;
margin-top: -6em;
background: transparent;
}
}
<div class="container">
<div class="left"></div>
<div class="right">
<h1 class="heading">
This is a heading!
</h1>
<p class="lorem">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae iste nihil, quasi eos aspernatur doloribus quos consequatur animi. In, nemo!
</p>
</div>
</div>
I also set the background of .right to transparent so I can see my div is still there (I can see the green border), but the background-image seems to be missing.
I'm pretty sure it has something to do with the flex: 1 40%; that I set in .left in the beginning, because when I get rid of this flex property, it seems to work. But my question is:
Why does the .left div basically collapse when I change the flex-direction?
I did some research and the only thing I found was that I have to set a height to the div, but as you can see in my code my .left already has a height. So I'm sure it has something to do with the flex property of my .left.
If I understood correctly, when you got to the media query width the background image would collapse but not completely disappear due to the green border.
I added a height property to the container in both the media code and original container selector and now the image doesn't disappear. Also make sure to add the meta tag to your html head tag! Hope this helps!
HTML
<meta name="viewport" content="width=device-width, initial-scale=1">
CSS
body{
min-height: 100vh;
background-color:#d6bd9e;
display: flex;
align-items: center;
justify-content: center;
}
.container{
width: 90%;
height: 100vh;
max-width: 960px;
display: flex;
justify-content: center;
align-items: center;
}
.left{
border: 2px solid green;
flex: 1 40%;
width: 40%;
height: 30rem;
background: url("https://images.unsplash.com/photo-1512641406448-6574e777bec6?ixlib=rb- 1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHw%3D&w=1000&q=80") no-repeat;
background-size: cover;
border-radius: 8px;
}
.right{
min-height: 20rem;
flex: 1 50%;
background-color: #4d6d52;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
padding: 1.5em;
border-radius: 8px;
margin-left: -4em;
}
#media all and (max-width: 500px){
.container{
width: 100%;
flex-direction: column;
height: 80vh;
}
.left{
width: 90%;
}
.right{
width: 75%;
min-height: 14rem;
margin: 0;
margin-top: -6em;
}
}
I want to build, something like a carousel, that you can slide using a scrollbar. In each of the slides, there's a single line of text that should be both horizontally and vertically centered.
Setting align-items: center changes height of the parent div.
.carousel {
width: 100%;
background-color: #dbdbdb;
overflow-y: visible;
overflow-x: auto;
white-space: nowrap;
}
.carousel .slide {
display: inline-flex;
width: 250px;
height: 150px;
margin: 10px 10px 10px 10px;
background-color: #FFF;
font-weight: bolder;
font-size: 15px;
white-space: pre-wrap;
align-items: center;
justify-content: center;
text-align: center;
text-align-last: center;
}
<div class="carousel">
<div class="slide">Lorem ipsum dolor</div>
<div class="slide">quisquam est qui dolorem ipsum quia dolor sit amet lorem ipsum</div>
<div class="slide">consectetur, adipisci</div>
</div>
Comment out the align-items and it fits alright. How should I resolve this issue?
The problem is not align-items: center. That's all good.
The problem is that your flex container is an inline-level box (display: inline-flex), which activates the vertical-align: baseline default setting.
Since your middle item has two lines of text, the box adjusts its baseline to line-up with its siblings. (Notice how all boxes line up when they each have a single line of text.)
Just override the default with vertical-align: bottom.
.carousel .slide {
vertical-align: bottom;
}
.carousel {
width: 100%;
background-color: #dbdbdb;
overflow-y: visible;
overflow-x: auto;
white-space: nowrap;
}
.carousel .slide {
display: inline-flex;
width: 250px;
height: 150px;
margin: 10px 10px 10px 10px;
background-color: #FFF;
font-weight: bolder;
font-size: 15px;
white-space: pre-wrap;
align-items: center;
justify-content: center;
text-align: center;
text-align-last: center;
vertical-align: bottom; /* NEW */
}
<div class="carousel">
<div class="slide">Lorem ipsum dolor</div>
<div class="slide">quisquam est qui dolorem ipsum quia dolor sit amet lorem ipsum</div>
<div class="slide">consectetur, adipisci</div>
</div>
Also note:
the problem doesn't exist when you remove align-items: center because the default value is stretch, which allows the text to align at the baseline (i.e., first line) across boxes regardless of the number of lines (demo)
flex-start would also work (demo)
flex-end would not (demo)
More details about vertical-align: baseline:
Why is there a vertical scroll bar if parent and child have the same height?
I'd normally just use line-height for vertical centering, but on this occasion the layout I'm working to is a little trickier.
I've put together this jsfiddle to show where I'm at so far. All the CSS hacks suggest using table-cell trickery for this but I can only get it to work if the wrapper has an absolute height, so for me this text isn't vertically centered:
<div class="wrap">
<a href="#">
<img src="http://www.thekrausemouse.com/wp-content/uploads/2016/03/sample-1.jpg" />
<span class="text"><span>Text that might span multiple lines</span></span>
</a>
</div>
https://jsfiddle.net/fdtbvmcw/
What I basically need is for the text, regardless of how many lines it spans, to sit in the middle of the image. The image can't be a background-image and I can't attach fixed widths or heights to the wrapper.
The wrapper is simulating a responsive column within a bigger page template and I need the image to retain full width of that column you see. Other HTML can be added within the column if need be.
Thoughts?
Flexbox can do that...
.wrap {
height: auto;
position: relative;
width: 50%;
}
.wrap a img {
height: auto;
width: 100%;
}
.wrap a span.text {
height: 100%;
left: 0;
position: absolute;
text-align: center;
top: 0;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.wrap a span.text span {
color: #fff;
font-size: 20px;
font-weight: bold;
line-height: 1.25
}
<div class="wrap">
<a href="#">
<img src="http://www.thekrausemouse.com/wp-content/uploads/2016/03/sample-1.jpg" />
<span class="text"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id praesentium nihil iure amet dolore nulla totam modi </span></span>
</a>
</div>
I think is better use translateY, it works in more devices
//CSS
.wrap {
height: auto;
position: relative;
width: 50%;
}
.wrap a img {
height: auto;
width: 100%;
}
.wrap span {
color: #fff;
font-size: 26px;
font-weight: bold;
line-height: 30px;
vertical-align: middle;
top: 50%;
transform: translateY(-50%);
display:block;
position:absolute;
text-align:center;
}
//HTML
<div class="wrap">
<a href="#">
<img src="http://www.thekrausemouse.com/wp-content/uploads/2016/03/sample-1.jpg" />
<span>Text that might span multiple lines</span>
</a>
</div>
https://jsfiddle.net/MAXXALANDER/fdtbvmcw/2/
I would also use flex for your solution.
.wrap a .text {
height: 100%;
left: 0;
position: absolute;
text-align: center;
top:0;
display: flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
justify-content: center;
align-items: center;
}