div垂直居中

来源：互联网发布：万得股票mac版编辑：程序博客网时间：2024/05/19 14:54

前端应用场景、笔试、面试中经常遇到div垂直居中问题，我暂且把它分为两类：

1、高度固定的div在父元素中垂直居中情况（相对简单些）：

方法1：无副作用；兼容性：IE8及以上

css:

.father{height: 300px;position: relative;background-color: green;}
.son{height: 100px;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto 0;background-color: red;}
html:
<div class="father">

<div class="son"></div>

</div>
方法2：无副作用；兼容性：IE6及以上
css：
.father{height: 300px;position: relative;background-color: green;}
.son{height: 100px;position: absolute;width: 100%;top: 50%;margin-top: -50px;background-color: red;}
html：
<div class="father">

<div class="son"></div>

</div>
相信大家还有很多方法，我暂时说到这。

2、高度不定（自适应）的div在父元素中垂直居中（这个情况稍微复杂些）：

方法1：无副作用；兼容性IE9及以上
css：
.father{height: 200px;width: 300px;background-color: green;}
.son{position: relative;top: 50%;transform: translateY(-50%);background-color: red;word-break: break-all;}
html：
<div class="father">

<div class="son">ssssssssssddddddddddddddd
ddddddssssssssssdddddddddddddddddddddss
ssssssssdddddddddddddddddddddssssssssssd
dddddddddddddddddddd</div>

</div>
方法2：有副作用（中间多了一层div）；兼容性IE6及以上
css：

.out{display: table;width: 300px;height: 200px;border: 1px solid #ddd;}

.mid{display: table-cell;vertical-align: middle;border: 1px solid green;}
.in{border: 1px solid red;}
/* 兼容IE7 */
*+html .out{position: relative;text-align: center;}
*+html .mid{position: absolute;top: 50%;}
*+html .in{position: relative;top: -50%;left: -50%;}
/* 兼容IE6（实测IE5.5也行） */
*html .out{position: relative;text-align: center;}
*html .mid{position: absolute;top: 50%;}
*html .in{position: relative;top: -50%;left: -50%;}
html：
<div class="out">

<div class="mid">

<div class="in">666dasdadasdadasdadasdasdasds

adsadsadasdsadsadsadsadasdsadsadsadasdasd
sassssssssssssssssssssssssssssssssssssssssss

</div>

</div>
方法3：无副作用，最简单，但是兼容性只能到IE10及以上
css：
.out{display: flex;align-items: center;justify-content: center;width: 300px;height: 200px;border: 1px solid #ddd;}
html：
<div class="out">

<div>aaaaaa</div>

</div>

------------------------ 分隔线呀分隔线 ------------------------------
试着写写前端学习的历程，有错误之处欢迎拍砖（可以打脸）

1 0