真实中心垂直和水平CSS Div [复制]

This question already has an answer here:

这个问题在这里已有答案:

How do I vertically center text with CSS? 36 answers

如何使用CSS垂直居中文本? 36个答案

How is it possible to create a true center CSS div cross browser for example to use within a holding page?

如何在一个保持页面中创建一个真正的中心CSS div跨浏览器?

I have tried this 2007 css trick - How To Center an Object Exactly In The Center but as you can see from my JSFiddle of the code its not 100% center.

我已经尝试过这个2007年的css技巧 - 如何在中心完全居中一个对象,但正如你从我的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;
}

8 个解决方案

#1

That technique requires the element to have a fixed width and height. You are not setting the width and height. Based on your border and margins, to center it, the width would need to be 190 pixels and the height would need to be 90 pixels. Using line-height and text-align in combination with a fixed width and height makes the text and border centered. Try it.

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

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

You can do it with pure CSS:

你可以用纯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;
}

It is important to give concrete (eg: 300px) and not derived (like: auto or 30%) values for width and 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'>

for example

<!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

This is what I did

这就是我所做的

<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>

Hope this helps.

希望这可以帮助。

#5

That's my solution:

这是我的解决方案:

<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>

It works in a lot of browsers. And there is no problem with content added after layout.

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

#6

This is an extra example with a height setter I created for IE vertical alignment. The extra span has a vertical-align:middle.

这是我为IE垂直对齐创建的高度设置器的额外示例。额外的跨度有一个vertical-align:middle。

<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>

#7

Set the display type of the DIV to table-cell. Then you can use normal vertical-align, just like a TD element.

将DIV的显示类型设置为表格单元格。然后你可以使用普通的vertical-align,就像TD元素一样。

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

#8

Have a look at this; quite a clever article.

看看这个;非常聪明的文章。

#1