窗口中 div 垂直和水平居中的最简单方法是什么？

发布于 2024-09-26 13:25:31 字数 253 浏览 5 评论 0 原文

给定一个已知尺寸的 div，例如 width: 300px; height: 200px，将其垂直和水平放置在屏幕中间的最简单方法是什么？示例

我对最新的 Firefox 感兴趣（不需要 IE hack）。

请仅使用 CSS，不要使用 Javascript。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

柒七 2024-10-03 13:25:31

将其放置在距窗口/父容器 50% 的位置，并使用负边距大小，即元素宽度/高度的一半:)

position: absolute; // or fixed if you don't want it scrolling with the page.
width: 300px;
height: 200px;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -100px;

您可能需要设置高度： 100%，在 body 和 html 上

html, body {
    height: 100%;
}

编辑：这是一个有效的示例。

Position it 50% from the window/parent container and use a negative margin size that's half of the elements width/height :)

position: absolute; // or fixed if you don't want it scrolling with the page.
width: 300px;
height: 200px;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -100px;

You might need to set height: 100%, on both the body and html

html, body {
    height: 100%;
}

Edit: Here's a working example .

回复收藏 0 原文

会发光的星星闪亮亮i 2024-10-03 13:25:31

在不支持 IE 的情况下，使用 display: table 和 display: table-cell 实际上很容易实现。

以下是 HTML 的更新：

<div id='my_div'>
    <div class="centered">this is vertically centered</div>
</div>

CSS：

body, html
{
    height: 100%;
}
body
{
    margin: 0;
    padding: 0;
    border: 1px solid blue;
}
#my_div
{
    width: 300px;
    border: 1px solid red;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    display: table;
    overflow: hidden;
}
.centered
{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

并预览：http://jsfiddle.net/we8BE/

Without supporting IE, this is actually pretty easy to achieve using display: table and display: table-cell.

Here's an update to your HTML:

<div id='my_div'>
    <div class="centered">this is vertically centered</div>
</div>

CSS:

body, html
{
    height: 100%;
}
body
{
    margin: 0;
    padding: 0;
    border: 1px solid blue;
}
#my_div
{
    width: 300px;
    border: 1px solid red;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    display: table;
    overflow: hidden;
}
.centered
{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

And to preview: http://jsfiddle.net/we8BE/

回复收藏 0 原文

一刻暧昧 2024-10-03 13:25:31

我不知道这是否是最简单的方法，但它似乎有效。

http://www.infinitywebdesign.com/research/cssverticalcentereddiv.htm

回复收藏 0 原文

绅士风度i 2024-10-03 13:25:31

您愿意使用哪些方法？例如 CSS 达到什么级别 - 2 或 3？ JavaScript？ jQuery？我的第一个想法是，由于 div 可以通过 margin-left: auto; 和 margin-right: auto; 水平居中，也许可以尝试 margin: auto; 对于所有 4 个面。让我知道它是否有效。