Jquery 使用全宽/全高边框将div居中
首先，这是jfiddle： 我试图做的是使白色边框扩展屏幕的整个高度，并使方框内的内容水平和垂直居中。背景将发生变化，因为三个图像（而不是纯黑色）将在彼此之间变化。因此，将白色边框作为实际图像的一部分会很奇怪。我希望它与图像分开Jquery 使用全宽/全高边框将div居中,jquery,html,css,Jquery,Html,Css,首先，这是jfiddle： 我试图做的是使白色边框扩展屏幕的整个高度，并使方框内的内容水平和垂直居中。背景将发生变化，因为三个图像（而不是纯黑色）将在彼此之间变化。因此，将白色边框作为实际图像的一部分会很奇怪。我希望它与图像分开 <body id="home-page"> <main> <div> <p>Lorem ipsum dolor sit amet, duis eros posuere sit, volutpat n
<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>
我认为目前唯一的其他选择是通过jQuery捕获屏幕的高度，然后将主屏幕的高度设置为该高度。但在我这么做之前，我想知道是否有一种方法可以通过在chrome中通过以下代码实现的CSS垂直对齐来做到这一点
高度：100%；
显示器：flex；
对齐项目：居中
对于.main
div，框大小：边框框已添加，以便我们可以使用100%宽度
html，身体需要100%的高度
这是最新的小提琴-
请登录chrome。希望这能起作用。：D在chrome、firefox、opera、ie中测试过
body#主页{
背景色：#000000；
}
正文#主页主页{
左：0px；
右：0px；
底部：0px；
顶部：0px；
位置：绝对位置；
显示：表格；
边框：8px实心#FFF；
利润率：20px；
}
正文#主页主分区{
文本对齐：居中；
保证金：0自动；
垂直对齐：中间对齐；
填充：20%；
}
正文#主页主分区p{
字体大小：12px；
颜色：#FFF；
线高：1.4；
字母间距：1px；
}
这是一个很好的例子，它是一个很好的例子
维韦拉。阿梅特·奎斯克，只不过是精英酒后驾车，还有调味品。肘叶Ultricies cubilia eu fronnilla elementum
埃拉，这是一个封建制度，是元素间的产物，是非调味品，是非调味品。
厄洛斯·图尔皮斯在埃拉特塞德，一个小人，厄洛斯·阿库。美国东部时间nec奥古斯时间
与其他两个答案相似，但没有所有的位置：绝对/显示：flex废话（此答案对跨浏览器友好）：
*{
框大小：边框框；
}
html，正文{
身高：100%；
宽度：100%；
保证金：0；
}
正文#主页{
背景色：#000000；
填充：20px；
}
正文#主页主页{
显示：表格；
填充：20px；
宽度：100%；
边框：8px实心#FFF；
身高：100%；
}
正文#主页主分区{
文本对齐：居中；
显示：表格行；
}
正文#主页主分区p{
显示：表格单元格；
字体大小：12px；
颜色：#FFF；
线高：1.4；
字母间距：1px；
垂直对齐：中间对齐；
}
洛雷姆·伊普苏姆·多洛尔·塞特（Lorem ipsum dolor sit amet）、杜伊斯·厄罗斯·波苏尔·塞特（duis eros posuere sit）、帕特·内克·马萨（Pat nec massa）和阿梅特·佩德·欧·胡斯托（amet pede eu justo）、休斯底斯·维。阿梅特·奎斯克，只不过是精英酒后驾车，还有调味品。第三方是非调味品，第三方是封建制度，第三方是非调味品，第三方是非调味品。厄洛斯·图尔皮斯在埃拉特塞德，一个小人，厄洛斯·阿库。美国东部时间nec奥古斯时间
你很接近了。我在body和html以及容器中添加了100%，并将main div设置为显示为table cell。它不是完美的，但它是一个危险的CSS解决方案更接近的解决方案：@Vaune_X是您随正文发送的第二个解决方案，html{height:calc（100%-8px）；}跨浏览器兼容？大多数现代浏览器都支持calc。从向后兼容性的角度看，没有那么多。如果您感兴趣，我也可以帮助您设计jQuery解决方案
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;
}