Centering a div with a full width / height border
First, here's a jfiddle: https://jsfiddle.net/nuLyq28d/
What I'm trying to do is make the white border extend the full height of the screen and center the content inside the box, both horizontally and vertically. The background will change as it will be three images (instead of solid black) changing among themselves. So leaving the white border as part of the actual images would be weird. I want it to be separated from images.
<body id="home-page">
<main>
<div>
<p>Lorem ipsum dolor sit amet, duis eros posuere sit, volutpat nec massa sit a ac, amet pede eu justo, suspendisse adipiscing
viverra. Amet quisque, justo elit dui orci aliquam praesent, et condimentum nibh. Ultricies cubilia eu fringilla elementum
erat, arcu metus dictum id feugiat, ultricies interdum elementum, magna nec urna sit non condimentum a, massa tempus nibh.
Eros turpis in erat sed, adipiscing a molestie, eros arcu. Est at est nec augue</p>
</div>
</main>
body#home-page
{
background-color: #000000;
}
body#home-page main
{
display: table;
padding: 20px;
width: 88%;
border: 8px solid #FFF;
margin: 20px;
}
body#home-page main div
{
text-align: center;
margin: 0 auto;
vertical-align: middle;
width: 50%;
}
body#home-page main div p
{
font-size: 12px;
color:#FFF;
line-height: 1.4;
letter-spacing: 1px;
}
Things I have tried so far include: - absolute positioning of the content. It pushed him out of the border and looked terrible. - the set height will not work as it requires a response.
I think my only other option at this stage is to grab the screen height via jQuery and then set the main height to that height. But before I do that I was wondering if there is a way to do this with CSS
source to share
Vertical alignment achieved in chrome by the following code
height: 100%;
display: flex;
align-items: center;
For the .main
div, box-sizing: border-box;
added so that we can use 100% width.
html, the body needs 100% height.
Here is the updated fiddle - https://jsfiddle.net/afelixj/nuLyq28d/7/
Please check chrome.
source to share
Hope it works ..: D tested in chrome, firefox, opera, i.e. ...
body#home-page {
background-color: #000000;
}
body#home-page main {
left:0px;
right:0px;
bottom:0px;
top:0px;
position:absolute;
display: table;
border: 8px solid #FFF;
margin: 20px;
}
body#home-page main div {
text-align:center;
margin:0 auto;
vertical-align: middle;
padding:20%;
}
body#home-page main div p {
font-size: 12px;
color:#FFF;
line-height: 1.4;
letter-spacing: 1px;
}
<body id="home-page">
<main>
<div>
<p>Lorem ipsum dolor sit amet, duis eros posuere sit, volutpat nec massa sit a ac, amet pede eu justo, suspendisse adipiscing
viverra. Amet quisque, justo elit dui orci aliquam praesent, et condimentum nibh. Ultricies cubilia eu fringilla elementum
erat, arcu metus dictum id feugiat, ultricies interdum elementum, magna nec urna sit non condimentum a, massa tempus nibh.
Eros turpis in erat sed, adipiscing a molestie, eros arcu. Est at est nec augue</p>
</div>
</main>
</body>
source to share
Similar to the other two answers, but without any bullshit position:absolute;
/ display:flex;
(this answer is cross-browser):
* {
box-sizing:border-box;
}
html, body {
height:100%;
width: 100%;
margin:0;
}
body#home-page {
background-color: #000000;
padding:20px;
}
body#home-page main {
display: table;
padding: 20px;
width: 100%;
border: 8px solid #FFF;
height:100%;
}
body#home-page main div {
text-align: center;
display: table-row;
}
body#home-page main div p {
display: table-cell;
font-size: 12px;
color:#FFF;
line-height: 1.4;
letter-spacing: 1px;
vertical-align: middle;
}
<body id="home-page">
<main>
<div>
<p>Lorem ipsum dolor sit amet, duis eros posuere sit, volutpat nec massa sit a ac, amet pede eu justo, suspendisse adipiscing viverra. Amet quisque, justo elit dui orci aliquam praesent, et condimentum nibh. Ultricies cubilia eu fringilla elementum erat, arcu metus dictum id feugiat, ultricies interdum elementum, magna nec urna sit non condimentum a, massa tempus nibh. Eros turpis in erat sed, adipiscing a molestie, eros arcu. Est at est nec augue</p>
</div>
</main>
</body>
I installed this:
* {
box-sizing:border-box;
}
so we can just throw 100% of the height and width in any element without having to count the padding or border.
Then we'll just give html
both the body
full page size and give our elements a table / cell table.
source to share