DIV居中之完全指引

每一个新手难免感到居中一个DIV没有如自己所期望的容易。居中DIV里面的内容很容易，可以通过设置text-align属性为center, 但是事情往往会变得少许棘手. 当你去垂直居中一个DIV，你会感觉无能为力。

这篇文章的目的是去展示如何在一个页面或DIV里面横向、纵向或横纵向同时居中一个DIV,以及少量的CSS技巧。

在一个页面居中一个DIV：

这个方法兼容任何浏览器，

css

.center-div
{
margin: 0 auto;
width: 100px;
}

实例：http://codepen.io/Tipue/pen/voseD

在一个页面的可用空间里把DIV左右边距设置为auto. 记住，你需要居中的DIV必须有一个宽度属性。

在一个DIV中居中另一个DIV:

这个方法兼容大部分浏览器，

css,

.outer-div
{
padding: 30px;
}
.inner-div
{
margin: 0 auto;
width: 100px;
}

html,

<div class="outer-div"><div class="inner-div"></div></div>

实例：http://codepen.io/Tipue/pen/apDLG

这个方法再次利用margin属性的auto值。里面的DIV必须有一个宽度属性。

在一个DIV中居中另一个带有inline-block值的DIV

这个方法中需居中的DIV不需要设置宽度。这个方法兼容所有自适应模式的浏览器，包含IE8.

CSS,

.outer-div
{
padding: 30px;
text-align: center;
}
.inner-div
{
display: inline-block;
padding: 50px;
}

Html,

<div class="outer-div"><div class="inner-div"></div></div>

实例：http://codepen.io/Tipue/pen/Ednlt

属性text-align仅仅对inline元素有效。inline-block值的元素可以很好的显示在一个inline的DIV中,所以外部DIV的text-align属性居中了内部的DIV.

在一个DIV中横向纵向同时居中一个DIV

这个方法使用把边距设为auto实现横向纵向同时居中。 这个方法兼容所有浏览器。

CSS

.outer-div
{
padding: 30px;
}
.inner-div
{
margin: auto;
width: 100px;
height: 100px;
}

HTML

<div class="outer-div"><div class="inner-div"></div></div>

实例：http://codepen.io/Tipue/pen/vsKif

在这个方法中内部的DIV必须设置宽度和高度。如果外部的DIV有一个固定高度它将不能正常工作。

在页面的底部居中一个DIV

这个方法使用把边距设为auto和绝对定位外面的DIV。这个方法兼容所有浏览器。

CSS

.outer-div
{
position: absolute;
bottom: 70px;
width: 100%;
}
.inner-div
{
margin: 0 auto;
width: 100px;
height: 100px;
background-color: #ccc;
}

HTML

<div class="outer-div"><div class="inner-div"></div></div>

实例： http://codepen.io/Tipue/pen/bwLDh

内部的DIV必须有一个宽度属性。页面底部的边距需要设置外面DIV的bottom属性。

在一个页面中横向纵向同时居中一个DIV:

这个方法再次使用了设置边距为auto和绝对定位外面的DIV。这个方法兼容所有浏览器。

CSS

.center-div
{
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
background-color: #ccc;
}

实例: http://codepen.io/Tipue/pen/CBbna

这个DIV必须有一个宽度和高度值。

原文：http://www.tipue.com/blog/center-a-div/