使一个div垂直+水平居中

来源：互联网发布：origin改host软件编辑：程序博客网时间：2024/05/16 04:36

使一个div垂直+水平居中的几种方法

一：绝对定位居中（原始版）

设外层div相对定位，内层div绝对定位，top、left分别设为50%，然后通过设置margin-top、margin-left值为宽度的负数就可以成功实现垂直水平居中了：

<!DOCTYPE html>

<head>

<title>Document</title>

*{margin: 0;padding:0;}

.outer{

width: 80%;

height: 400px;

background: #ccc;

margin: 0 auto;

position: relative;

}

.inner{

width: 400px;

height: 300px;

background: green;

position: absolute;

top: 50%;left: 50%;

margin-top: -150px;/*设为高度的1/2*/

margin-left: -200px;/*设为宽度的1/2*/

}

</style>

</head>

<body>

</div>

</body>

</html>

这个经典的方法最大的不足之处是inner的宽度必须是固定值，否则margin-top和margin-left的值将无法设置。

思路2：绝对定位居中（改进版之一）

我们的目的是让inner在top和left方向发生50%偏移之后，再往回偏移一定距离，而css里关于位置偏移的属性还有什么呢？当我们查阅最新版的css3属性之后，发现这样一个属性：selector{transform：translate();},translate代表着水平、垂直方向上的转换（位移），其中当括号内的值设为百分比时，将以元素自身宽度为基准，移位相应的宽度，这样一来，我们的问题就得到了解决：

*{margin: 0;padding:0;}

.outer{

width: 80%;

height: 400px;

background: #ccc;

margin: 0 auto;

position: relative;

}

.inner{

width: 70%;

height: 300px;

background: green;

position: absolute;

top: 50%;left: 50%;

transform: translate(-50%,-50%);/*在水平和垂直方向上各偏移-50%*/

}

</style>

<body>

</div>

</body>

这个方法妥善解决了内层div宽度不确定的问题，但由于使用了css3的新属性，在低版本ie浏览器下是不兼容的。

思路3：绝对定位居中（改进版之二）

*{margin: 0;padding:0;}

.outer{

width: 80%;

height: 400px;

background: #ccc;

margin: 0 auto;

position: relative;

}

.inner{

width:70%;

height: 300px;

background: green;

position: absolute;

top: 0;left:0;right:0;bottom:0;/*让四个定位属性都为0*/

margin:auto;/*很关键的一步*/

}

</style>

这个方法，不仅能在inner宽度不确定时发挥作用，还能兼容各种主流浏览器，看上去似乎很完美，但事实上，当我们的需求改为：宽度随内部文字自适应，即宽度未设置时，这种方法就无法满足需求了，原因是left、right设为0后，inner在宽度未设置时将占满父元素的宽度。

思路4：flex布局居中

flex布局是移动端一种很新潮的布局方法，利用flex布局使元素垂直水平居中，缺点依然是令人头疼的兼容性问题（在ie11-中不起作用），优点是代码量比前几种方法相比略少，方便使用。

<!DOCTYPE html>

<head>

<title>Document</title>

*{margin: 0;padding:0;}

.outer{width: 80%;height: 400px;background: #ccc;margin:0 auto;

display: flex;/*设置外层盒子display为flex*/

justify-content:center;/*设置内层盒子的水平居中*/

align-items:center;/*设置内层盒子的垂直居中*/

}

.inner{display: inline-block;height: 300px;background: yellow;}

</style>

</head>

<body>

<div class="inner">这是一段文字这是一段文字这是一段文字</div>

</div>

</body>

</html>

阅读全文

0 0