<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宽高不固定元素垂直居中</title>
    <style>
        .box{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<span class="box">
    我将居中显示
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda beatae,
    commodi eligendi, expedita ipsa ipsam magni neque nobis nulla odio possimus
    provident quam rerum sed sint ullam! Incidunt, sunt.
</span>
</body>
</html>