简单的 div css 在中间居中内容答案

【问题标题】：simple div css centering content in the middle简单的 div css 在中间居中内容
【发布时间】：2011-08-04 09:34:05
【问题描述】：

嘿，我是一个 CSS 新手，但我知道这应该很容易。如果有人能很快地帮助我，那么我就可以停止试图弄清楚这一点，那就太好了。

只有 2 件我需要帮助放置的物品。

一个 400x200px 的图像，我总是想要在中心（垂直和水平）这将是内容。和我想在底部居中的一行文本将是页脚。

提前致谢。

【问题讨论】：

我认为您必须更加具体才能获得回复。例如。您希望您的图像位于什么中心？ .. 这页纸？一个div？文本也一样。这就是页面上的全部内容，还是还有其他项目？
您应该提供您当前正在使用但不起作用的代码。
你能把你试过的东西和截图（如果可能的话）放上来吗
在什么的中心？这页纸？一个容器？如果是后者，容器的宽度和高度是固定的，还是需要扩展/收缩以适应不同的内容或视口宽度或容器的父宽度？您是否需要在此图像周围“流动”文本或其他项目，或者它是否像灯箱一样叠加？您的答案将取决于所有这些考虑因素。
感谢您的快速回复。除了图像和页脚之外，我不想要页面上的任何内容，所以它非常基本。只是水平和垂直中心的图像和底部的页脚。而已。我想我正在努力的部分是让图像居中和底部的页脚，无论使用什么屏幕分辨率。

标签： css html center footer

【解决方案1】：

如果我理解您的要求，我认为您应该尝试在 css 中使用边距确实是要走的路。 ;)

<html>
    <head>
        <title>Center</title>
            <style type="text/css">
            IMG.image1 {
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -200px;
                margin-top: -100px
            }
            #footer {
            position: fixed;
            bottom: 0;
            text-align: center;
            width: 100%;
            }
        </style>

    </head>
    <body>  
        <div id="Centeredcontent">    
            <img class="image1" width="400px" height="200px"></img>
        </div>
            <div id="footer">Footer</div>
    </body>
</html>

你的图像总高度和宽度是一半并将其设为负值，因此宽度为 (margin-left: -200px;) 顶部为 (margin-right: -100px;)

【讨论】：

#footer 可以是位置：绝对或位置：固定。无论哪种方式都应该可以正常工作。
所有这一切都是为了使图像水平居中。与 . 相同的功能
固定明白你现在说什么：D
我第一次看到有人在 css 中使用大写的标签名称。

【解决方案2】：

在 CSS 中确实没有垂直居中的概念。已经有很长时间的抱怨了。选项：

您可以使用一张桌子。我发现这是一个可以用于定位的方法。
您可以使用 JavaScript。获取窗口的高度，做一些数学运算，然后定位图像。有点乱。可能付出的努力多于其价值。
您可以使用 display: table CSS。唉，在 IE AFAIK 中不起作用。
你可以假装它。为图像提供 150 像素的上边距，并且可以在底部空间可变的情况下使用。这就是我要走的路线。务实的设计。 ;)

【讨论】：