HTML5 / CSS3 在一行中水平和垂直居中 2 个项目答案

【问题标题】：HTML5 / CSS3 center 2 items horizontally and vertically in a rowHTML5 / CSS3 在一行中水平和垂直居中 2 个项目
【发布时间】：2012-11-14 17:54:24
【问题描述】：

我有 2 个项目：一个日历组件和一个按钮。它们的高度/宽度不同。

如何在一行中水平和垂直居中？

桌子？分区？ ...

我认为每个对象都有 50% 的区域并以该区域为中心。但是，我可能愿意将它们水平居中（彼此之间有间隙）。然后将它们垂直居中作为一对。

【问题讨论】：

我不能 100% 确定垂直居中，但通常当你想将标签居中时，你会给它的样式 margin-left: auto;边距右：自动。

标签： asp.net asp.net-mvc html css

【解决方案1】：

这对我有用：http://jsfiddle.net/bpkH4/。一些 CSS 纯粹是装饰性的。

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    #btn
    {
        background-color:#FF0000;
        width:100px;
        height:30px;
    }

    #comp
    {
        background-color:#00FFFF;
        width:200px;
        height:200px;
    }

    #container
    {
        width:500px;
        height:300px;
        overflow:auto;
        background-color:#CCCCCC;           

        text-align:center;
    }

    .contain
    {

        background-color:#AAAAAA;
        float:left;
        width:50%;
        height:100%;
        position: relative;
    }

    .elem
    {
        position: absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
        margin:auto;
    }
    </style>
</head>
<body>
    <div id="container">
        <div class="contain">
            <div class="elem" id="comp">Component in Here</div>
        </div>
        <div class="contain">        
            <div class="elem" id="btn">Button</div>
        </div>
    </div>
</body>
</html>

【讨论】：

嗯。适用于 Firefox 但不适用于 IE9。
@ginalster 您可能需要添加 HTML5 文档类型：。我没有在上面的示例中包含它。
嗯，现在在 IE 的 jsfiddle 中似乎可以正常工作。不能在 VS2012 部分视图中工作，但可能是因为它嵌套在
s 和表中。

【解决方案2】：

将它们放入容器 div 并设置边距：0 auto;在每个上将它们水平居中。您还可以使用相同的技术在页面上水平居中容器。

CSS Horizontal Align

Centering: Auto-width Margins

对于容器的垂直居中：

6 Methods For Vertical Centering With CSS

【讨论】：