True Center Vertical and Horizontal CSS Div [重复]答案

【问题标题】：True Center Vertical and Horizontal CSS Div [duplicate]True Center Vertical and Horizontal CSS Div [重复]
【发布时间】：2012-12-20 19:24:55
【问题描述】：

如何创建一个真正的中心 CSS div 跨浏览器，例如在保留页面中使用？

我已经尝试过这个 2007 年的 css 技巧 - How To Center an Object Exactly In The Center 但从我的代码中的JSFiddle 可以看出，它不是 100% 的中心。

HTML：

<div class="center">
  <p>Text</p>
</div>

CSS：

.center{
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
  border:5px solid black;
}

【问题讨论】：

为什么margin: 0 auto不够好？
@meagar：那只是水平居中，而不是垂直居中。
啊。问题确实应该表明意图是垂直居中元素。
@meagar 只适用于水平我也需要垂直

标签： css html cross-browser center

【解决方案1】：

该技术要求元素具有固定的宽度和高度。您没有设置宽度和高度。根据您的边框和边距，要使其居中，宽度需要为 190 像素，高度需要为 90 像素。将line-height 和text-align 与固定宽度和高度结合使用可使文本和边框居中。 Try it.

CSS

.center{
  position: fixed;
  top: 50%;
  left: 50%;
  width: 190px;
  height: 90px;
  line-height: 90px;
  text-align: center;
  margin-top: -50px;
  margin-left: -100px;
  border:5px solid black;
}

【讨论】：

【解决方案2】：

你可以用纯 CSS 做到这一点：

html {
  width: 100%;
  height: 100%;
}
body {
  min-width: 100%;
  min-height: 100%;
}
div.centeredBlueBox {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 300px;
  height: 200px;
  background-color: blue;
}

为width 和height 提供具体的（例如：300px）而不是派生的（例如：auto 或30%）值很重要。

【讨论】：

我认为，这个效果最好。它仍然可以调整内容大小，而无需重新计算其他大小

【解决方案3】：

<div style='position:absolute; left:50%; top:50%; margin-left:(-)width_of_your_element/2px; margin-top:(-)height_of_your_element/2px'>

例如

<!DOCTYPE html>
<html>
<body>
<div style='border:1px solid; width:200px; height:200px; position:absolute; left:50%; top:50%; margin-left:-100px; margin-top:-100px'>hallo</div>
</body>
</html>

【讨论】：

【解决方案4】：

这是我的解决方案：

<div style="position: absolute; left: 50%; height: 100%;">
    <div style="position: relative; left: -50%; display: table; height: 100%;">
        <div style="display: table-cell; vertical-align: middle;">
            //your content here
        </div>
    </div>
</div>

它适用于许多浏览器。而且布局后添加的内容也没有问题。

【讨论】：

【解决方案5】：

这是我为 IE 垂直对齐创建的高度设置器的额外示例。额外的跨度有一个垂直对齐：中间。

<style type="text/css">
    html, body {
        margin: 0;
        padding: 0;
        overflow:hidden;
        text-align:center;
    }
    html, body{
        height: 100%;
    }
    #loginContainer {
        margin: 0 auto;
        display: table;
        min-width:300px;
        text-align:left;
        height: 85%; /* vertical align not exact in the middle */
    }
    #loginContainer .label{
        width: 25%;
        float:left;
        white-space:nowrap;
        line-height:20px;
    }
    #loginContainer h2{
        border-bottom:2px solid #B4C3E1;
        border-width:0 0 3px;
        padding:2px 4px;
    }
    .mainHeader {
        position:absolute;
        top:0;
        left:0; 
        text-align:center; 
        width:100%; 
        font-size:2em;
        white-space:nowrap;
    }
    .detailsText {
        border-top:1px solid #F60;
        margin-top:5px;
        clear:both;
    }
    /* layout horizontal and vertical */
    .horizontalBox {
        display: table-cell;
        vertical-align: middle; /* not seen by IE6-7 */
        height: 100%;
        white-space: nowrap;
    }
    .verticalBox {
        padding: 55px 0 0 0; /* 55px height of logo */
    }
    .rightText {
        text-align:right;
    }
</style>
<!--[if lte IE 8]>
<style type="text/css">
    #loginContainer {
        width:300px; /* minimum width */
    }
    .horizontalBox {
        text-align: center;
    }
    .verticalBox, .heightSetter {
        display: inline-block;
        vertical-align: middle;
        text-align: left;
        zoom:1;
    }
    .heightSetter {
        height: 100%;
    }
    .verticalBox {
        display: inline;
        height: 0;
    }
    .heightSetter {
        width: 1px;
    }
</style>    
<![endif]-->
<div class="mainHeader">This is the Header content</div>
<div id="loginContainer">
    <div class="horizontalBox">
        <div class="verticalBox">
            <h2>My header of the vertical box</h2>
            <p>My Content</p>
        </div>
        <span class="heightSetter"></span>
    </div>
</div>

【讨论】：

【解决方案6】：

将DIV的display类型设置为table-cell。然后你可以使用普通的vertical-align，就像TD 元素一样。

<div style="display: table-cell; vertical-align: middle; height: 200px;">
Centered Text
</div>

【讨论】：

【解决方案7】：

看看this；相当聪明的文章。

【讨论】：

【解决方案8】：

这就是我所做的

<html>
<head>
    <title>Page Title</title>

    <style>
       .center { margin:auto; width:500px; background-color:green; }
    </style>
</head>
<body>
    <div class="center">
        <p>Help me please</p>
    </div>
</body>
</html>

希望这会有所帮助。

【讨论】：