元素居中（一篇非常好的文章）

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

When it comes to centering things in web design, the more information you have about the element being centered and its parent element, the easier it is. So what if you don't know anything? It's still kinda doable.

Not too hard: Known Child

If you know the height and width of both the element to be centered and its parent element (and those measurements won't change, i.e. not fluid width environment) one foolproof way to center the element is just to absolute position it with pixel values so it looks perfectly centered.

如果你知道该元素和父元素的height和widht，一种简单的方法是使用position:absolute确定偏移就可以了。

Let's say you know the exact width and height of the element you are centering, but the parent element can change in height and width.

如果知道该元素的尺寸，不知道父元素的尺度：

You absolutely position the element to be centered and set the top and left values to 50% and the margin top and left values to negative half of the elements height and width. That was a tounge twister, so check this out.

设置position:absolute，然后top,left为50%，margin-top为该元素height一半，margin-left为该元素width一半。

Harder: Unknown Child

The hard comes in when you don't know the dimensions of the element to be centered.

The grossest way to handle it is literally tables:

最粗鲁的方式是使用表格：

<table style=" 100%;">
  <tr>
     <td style="text-align: center; vertical-align: middle;">
          Unknown stuff to be centered.
     </td>
  </tr>
</table>

（个人注：其实td的vertical-align:middle,没必要显示设置，因为

thead, tbody,

tfoot 默认值为 { vertical-align: middle }
td, th { vertical-align: inherit }

可以看出td继承父元素默认也是middle.

)

(个人写的例子：

<style>
html,body{
    width:100%;
    height:100%;
}
table{
    width:100%;
    height:100%;
    border:1px solid red;
}
td{
    text-align:center;
    vertical-align:middle;
}

</style>
</head>

<body>
<table>
    <tr>
        <td>
          
            unknown stuff to be cetnerd
         </td>
    </tr>
 </table>
</body>

中文的文字在屏幕居中）

If you are worried about the semantics of that, you could attempt to match it to your content.

<div class="something-semantic">
   <div class="something-else-semantic">
       Unknown stuff to be centered.
   </div>
</div>

And get the same result as the tables like:

.something-semantic {
   display: table;
   width: 100%;
}
.something-else-semantic {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

（这里的vertical-align:middle不能少，否则就向上对齐了。这里可以看出td和display:table-cell还是有区别的，td不用设置

vertical-align,默认是middle，而table-cell不是middle，需要显示设置:

#owndiv{
    display:table-cell;
    300px;
    height:300px;
    border:1px solid red;
    text-align:center;
    vertical-align:middle;
}
<div id="owndiv">Owndiv</div>

上面的不能去掉vertical-align，否则就不能垂直居中了。注意:

vertical-align要点

It only applies to inline or inline-block elements 或table-cell元素
It affects the alignment of the element itself, not its contents (except when applied to table cells)
When it’s applied to a table cell, the alignment affects the cell contents, not the cell itsel

从第二点可以看出，但是inline or inline-block<它影响的是元素自己的对齐，而不是他的内容。

从第3点，应用到table-cell,影响的是cell内容，而不是元素自己.看以前写的：http://www.cnblogs.com/youxin/archive/2013/09/28/3343879.html）

如何证明上面的第二个div并没有垂直居中，而是其中的内容垂直居中了，看下面：

.something-semantic {
   display: table;
   width: 100%;300px;
    height:300px;
    border:1px solid red;
    
}
.something-else-semantic {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
    border:5px solid blue;
}

我故意把第二个div的border设的很宽，显示如下：

可以看到，第二个div是占据了外部div整个大小，但他的内容是居中的。

table-cell width和hight：http://www.ironspider.ca/tables/tablecells3.htm

）

CSS tables might be fine for you. Or it might not. Tables do render a bit differently than just a regular block-level div does. For instance the 100% width thing. A table will only stretch to be as wide as it needs to for the content inside it whereas by default a block level element will expand to the width of its parent automatically. Also, god help you if you need other content inside that div that you want to position or otherwise not act as a table-cell.

table与常规块元素有区别，例如设置widht:100%;一个table仅仅会伸到足够宽来容纳它里面的内容，而块元素会伸到它父元素的宽度。

Michał Czernow wrote in to me with an alternate technique that is extremely clever and accomplishes the same thing. If we set up a "ghost" element inside the parent that is 100% height, then we vertical-align: middle both that and the element to be centered, we get the same effect.（我们在父元素内设置一个ghost元素，height为100%，然后我们把ghost

和要居中的元素设置vertical-align:middle即可。

So does that ghost element need to be an un-semantic element? Nope, it can be a pseudo element.

/* This parent can be any width and height */
.block {
  text-align: center;
}
 
/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

（必须同时设置ghost和要居中元素为vertical-align:middle.

我们知道vertical-align不影响块级元素的对齐，只影响table-cell和inline元素。那么inline-block设置vertical-align有作用吗？

）

html:

<div class="block" style="height: 300px;">
    
    <div class="centered">
        <h1>Some text</h1>
        <p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said&mdash;"Did ye see anything looking like men going towards that ship a while ago?"</p>
    </div>
    
</div>

在线演示：

http://codepen.io/chriscoyier/pen/gsodI

I'd like to tell you the ghost element technique is way better and should be the go-to centering technique for the ages. But in reality, it's just about the same as the table trick. The browser support for this is essentially everything and IE 8+. IE 7 doesn't support pseudo elements. But it doesn't support CSS tables either, so it's a horse apiece. If IE <= 7 support is needed, it's <table> time (or use an equally un-semantic <span> or something for the ghost element).

This stuff isn't brand new territory. Gary Turner wrote about it like 5 years ago. But I credit Michał for doing it with a pseudo element and making it the most semantic approach yet.

Note: The 0.25em nudge-back is a little janky. 难伺候To do it perfectly, you could set font-size: 0; on the parent and then notch the font size back up inside the content container.

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

更多：http://www.iyunlu.com/view/css-xhtml/77.html

http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/

http://www.qianduan.net/css-to-achieve-the-vertical-center-of-the-five-kinds-of-methods.html