能用display：inline-block实现垂直居中吗

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
        }
    
        .warp1 {
            height: 80px;
            width: 100%;
            background-color: #14191e;
        }
    
        .warp1 h1 {
            color: #fff;
            text-align: center;
            line-height: 80px;
            font-size: 24px;
        }
    
        .warp2 {
            height: 400px;
            width: 100%;
            border: 1px #14191e solid;
        }
    
        .content {
            width: 500px;
            height: 100%;
            margin: 0 auto;
        }
    
        .one {
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }
    
        .content p {
            font-family: "微软雅黑";
        }
    </style>
</head>

<body>
    <div class="warp1">
        <h1>欢迎来到慕课网</h1>
    </div>
    <div class="warp2">
        <div class="content">
            <div class="one">
                <p>慕课网，只学有用的！</p>
                <p>慕课网（IMOOC）是IT技能学习平台。
                慕课网(IMOOC)提供了丰富的移动端开发、php开发、web前端、android开发以及html5等视频教程资源公开课。
                并且富有交互性及趣味性，你还可以和朋友一起编程。
                </p>
            </div>
        </div>
    </div>
</body>

</html>

按照教程里的table-cell方法我已经尝试成功了，之前百度的时候查到说table-cell与inline-block类似，

因此想尝试一下用inline-block实现居中但总是实现失败。

如果一定想要用inline-block实现垂直居中的话上面的代码应该如何修改呢？

神尾观铃丶 2019-08-12

源自：CSS文本样式 3-12 编程练习