css 不定宽高的div元素水平垂直居中

效果图：

方法一：

此div元素应是 inline-block：

用一个“ghost”伪元素（看不见的伪元素）和 inline-block / vertical-align 可以搞定居中，非常巧妙。但是这个方法要求待居中的元素是 inline-block，不是一个真正通用的方案。兼容IE8.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    
        .block {
          text-align: center;
          background: #abcdef;
        }

        .block:before {
          content: '';
          display: inline-block;
          height: 100%;
          vertical-align: middle;
          margin-right: -0.25em; /* Adjusts for spacing */
        }

        .centered {
          display: inline-block;
          vertical-align: middle;
          width: 50%;
          border: 1px solid red;
        }

    </style>
</head>
<body>

    <div class="block" style="height: 300px;">
        <div class="centered">
            <h1>案例题目</h1>
            <p>案例内容案例内容案例内容案例内容案例内容</p>
        </div>
    </div>

</body>
</html>

View Code