本文主要介绍IE7、IE8兼容视图、Firefox、Chrome等浏览器下都能垂直居中，但IE8不支持的情况下如何处理。
方法一：未知高度
使用大前端布局之一的table布局
td如果没有指定valign属性值，则默认为middle。
<table>
<tr>
<td>
左侧标题
</td>
<td colspan="3">
<div align="center">
</div>
</td>
</tr>
</table>
倘若你左侧内容仍无法居中对齐，此时可以使用3层div的技巧:
第一层style="position: relative;"
第二层style="position: absolute; top: 50%;"
第三层style="position: relative; top: -50%;"
此方法可解决未知高度下IE8垂直居中的问题
方法二：已知高度
50%绝对定位+负margin已知宽高的一半
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
position:relative;
width:400px;
height:400px;
background-color: blue;
}
.box{
background-color: red;
width:200px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top: -100px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
拓展
table布局不使用table元素，直接体用div布局，笔者更倾向于此方式。
一、布局方式
父级容器
display: table
子级容器display:table-cell
(1) 空间平均划分：子级容器默认是自动平分宽度沾满父级容器；
(2) 设置其中一个table-cell为固定宽度：如果固定好其中一个子级容器，那么其余子级容器会自动平分宽度沾满父级容器；
(3) 把子元素放置在父元素的中部,即垂直居中vertical-align:middle
(4) 等高对齐
<div class="container">
<div class="left_box">
左侧标题
</div>
<div class="right_box">
右侧内容
</div>
</div>
<style>
.container{
display: table;
}
.left_box,.right_box{
display: table-cell;
}
.left_box{
background: blue;
}
.right_box{
background: red;
}
</style>
二、优缺点
不足之处：
1.table 比其他html标签占更多的字节。造成下载时间延迟，占用服务器更多的流量资源（代码冗余）。
2.table 会阻挡浏览其渲染引擎的渲染顺序，会延迟页面的生成速度，让用户等待时间更久。
3.灵活性差，一旦设计确定，后期很难通过CSS让它展现新的面貌。
4.不利于搜索引擎抓取信息，直接影响到网站的排名。
可取之处：
1.兼容性好.
2.容易上手
转载：https://blog.csdn.net/qq_38209578/article/details/114633400
查看评论