Setting px width for table-cell - html

Question

I am giving a width to a div with display table cell property but it is not working .
My code is
<header class="header layers">
<div class="wrap">
<h1 id="title"><?php echo $blogtitle;?></h1>
</div>
</header>
And the css is
.layers {
position: absolute;
display: table;
top: 0;
left: 0;
overflow: hidden;
box-sizing: border-box;
table-layout: fixed;
}
.wrap {
height: 100%;
margin-right: auto;
margin-left: auto;
overflow: hidden;
display: table-cell;
vertical-align: middle;
width: 1040px;
}
.header {
height: 80px;
width: 100%;
}
#title {
font-size: 30px;
color: black;
font-family: 'Roboto', sans-serif;
}
But i don't know why it is not working this time i have used it many time with no problem . When i see the width of the wrap class in inspect element it is setting it to 100% with no error .
Please help . Appreciate any anwser and comment .
The fiddle link is this https://jsfiddle.net/yashag/zhsxLhzj/

Answer 1

As requested in the comments, here is an example of using display: flex (flexbox) to vertically-align text (as you were trying to do with display: table-cell). You can also specify width and height of a flexbox easily, like a normal block element.
As you can see, the display:flex element correctly vertically-centers the text, and can be set to a 1040px width correctly.
* {
box-sizing: border-box;
}
html, body {
height: 100%;
padding: 0;
margin: 0;
}
div#container {
display: flex;
align-items: center;
height: 100%;
width: 1040px;
}
div#centered {
height: 20px;
width: 100%;
text-align: center;
}
<div id="container">
<div id="centered">Vertically-centered using <code>display: flex</code>.</div>
</div>