Question

首先，这是jfiddle：https://jsfiddle.net/nuLyq28d/

我要做的是让白色边框展开屏幕的整个高度，并将内容水平和垂直居中。背景将会改变，因为它将是三个图像（而不是纯黑色）彼此之间的变化。因此，将白色边框留作实际图像的一部分会很奇怪。我希望它与图像分开。

<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; 
}

到目前为止我尝试过的事情包括： - 绝对定位内容。这把它推到边框外面看起来很糟糕。 - 设定的高度不起作用，因为这需要响应。

我认为此时我唯一的另一个选择是通过jQuery捕获屏幕的高度，然后将main的高度设置为该高度。但在我这样做之前，我想知道是否有办法通过CSS

来做到这一点

Answer 1

通过以下代码

在chrome中实现垂直对齐

height: 100%; display: flex; align-items: center;

对于.main div，添加box-sizing: border-box;以便我们可以使用100％的宽度。

html，身体需要100％的高度。

这是更新的小提琴 - https://jsfiddle.net/afelixj/nuLyq28d/7/

请检查chrome。

Answer 2

希望这会起作用..：在Chrome，firefox，opera中测试，即..

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>

Answer 3

与其他两个答案类似，但没有所有position:absolute; / display:flex;废话（此答案是跨浏览器友好的）：

＆＃13;

* {
    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;
}

＆＃13;

<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>

＆＃13;

我设置了这个：

* {
    box-sizing:border-box;    
}

所以我们可以在任何元素上抛出100％的高度和宽度，而无需计算填充或边框。

然后我们告诉html和body是整页大小，并为我们的元素提供表格/表格单元格布局。

使具有全宽/高边框的div居中

3 个答案: