今天小编跟大家讲解下有关CSS两种水平垂直居中示例介绍 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS两种水平垂直居中示例介绍 的相关资料，希望小伙伴们看了有所帮助。
第一种：将固定大小的div框相对窗口水平垂直居中 改变浏览器窗口大小时 依然保持水平垂直居中； 复制代码代码如下: <!doctype html> <html lang="en"> <head> <title>水平垂直居中</title> <meta charset="utf-8"> <style type="text/css"> .out{width: 0px; height: 0px; position: absolute; left: 50%; top: 50%; } .in{height: 300px; width: 300px; position: absolute; left: -150px; top: -150px; background-color: #999; } </style> </head> <body> <div class="out"> <div class="in"></div> </div> </body> </html> 第二种：让一个自适应大小的div相对浏览器窗口水平垂直居中 复制代码代码如下: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>自适应剧中</title> <style type="text/css"> .middle{ height: 300px; width: 300px; border: 1px solid; display: table-cell; text-align: center; vertical-align: middle; } .in{ background-color: red; height: auto; width: auto; min-width: 0px; min-height: 0px; display: inline; } </style> </head> <body> <div class="middle"> <div class="in">内容自适应水平垂直居中</div> </div> </body> </html>来源：爱蒂网
