Question

有没有办法不写一堆css和嵌套div或用负宽度值编写jQuery脚本？

如果没有，您首选的方式是什么？

我不知道为什么这么简单的任务不是html规范的一部分。

编辑：“绝对”我也意味着垂直居中！抱歉。另外：它应该使用动态宽度（不想指定它们）。

我希望有这样的事情：

<div class="ninja-center"></div>

div显示在屏幕中央。它真的应该很容易。没有怪异的CSS，脚本等。我的意思是它也可以使用2,3或4种方式，只有水平居中：

margin: auto
text-align: center
align="center" （已废弃）
...

为什么没有任何垂直对齐方式。

Answer 1

如果您的规格不简单，解决方案也不是。如果您有一个简单的请求（一个div，您希望它在中心），您将得到一个简单的解决方案：只需在宽度为div的div上使用margin:auto。

像这个随机的google链接显示：http://bluerobot.com/web/css/center1.html

你想要的摘录：

width:500px;
margin:0px auto;

从@myheadhurts的评论中看到这一点：http://jsfiddle.net/8vjGA/

Answer 2

这解释了一些很好的居中选择：

http://css-tricks.com/centering-in-the-unknown/

Answer 3

例如：

 div#giveanidnumb {
    margin:0px auto;
}

然后你可以添加你想要的所有css规范

Answer 4

使用display:inline-block，vertical-align:middle和height:100%垂直居中浏览器中具有未定义高度的内容：

html, body, .container, .placeholder { height: 100%;}
.placeholder, .wrapper { display: inline-block; }
.placeholder, .wrapper, .content { vertical-align: middle; }

占位符元素的高度为100％以支撑线框，因此vertical-align: middle具有所需的效果。

使用固定宽度的容器来包装图像：

.fixed { min-width: 1px; }

使用以下内容横向扩展浏览器中宽度未定义的内容：

.content { display:inline; }
.container { text-align:center; }

结合两种技术来创建一个居中的元素：

    <!doctype html>
    <html>
    <head>
    <title>Centered Image Gallery</title>
    <style type="text/css">
    html, body, .container, .placeholder { height: 100%;}
    
    img { width:16px; height:16px; margin-left: 20px; margin-top: 10px; }
    
    .container { text-align:center; }
    
    /* Use width of less than 100% for Firefox and Webkit */
    .wrapper { width: 50%; }
    
    .placeholder, .wrapper, .content { vertical-align: middle; }
    
    /* Use inline-block for wrapper and placeholder */
    .placeholder, .wrapper { display: inline-block; }
    
    .fixed { min-width: 1px; }
    
    .content { display:inline; }
    
    @media,
     {
     .wrapper { display:inline; }
     }
     </style>
    
    </head>
      <body>
      <div class="container">
        <div class="content">
            <div class="wrapper">
              <div class="fixed">
                <img src="http://microsoft.com/favicon.ico">
                <img src="http://mozilla.com/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="http://userbase.kde.org/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://microsoft.com/favicon.ico">
                <img src="http://mozilla.com/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="http://userbase.kde.org/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozilla.com/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="http://userbase.kde.org/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozilla.com/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="http://userbase.kde.org/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozilla.com/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="http://userbase.kde.org/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozilla.com/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="http://userbase.kde.org/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozilla.com/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="http://userbase.kde.org/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozilla.com/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="http://userbase.kde.org/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozilla.com/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="http://userbase.kde.org/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozilla.com/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="http://userbase.kde.org/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozilla.com/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="http://userbase.kde.org/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
            </div>
          </div>
       </div>
       <span class="placeholder"></span>
    </div>
    
    </body>
    </html>

优雅的方式绝对居中的div？

4 个答案: