段落垂直对齐方式

最新推荐文章于 2022-03-02 14:40:18 发布

朱亚狮

最新推荐文章于 2022-03-02 14:40:18 发布

阅读量581

点赞数

分类专栏：前端学习文章标签： div内容垂直居中

本文链接：https://blog.csdn.net/zys351148/article/details/77495462

版权

前端学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
    .outer{
        height: 300px;
        overflow: hidden;
        position: relative;
    }
    .outer[class]{
        display: table;position: static;
    }

    .middle{
        position: absolute;
        top: 50%;
    }
    .middle[class]{
        display: table-cell;
        vertical-align: middle;
        position: static;
    }

    .inner{
        position: relative;
        top: -50%;
    }
    #outerid{
        border:1px solid #000;
    }

</style>    
</head>
<body>
    <div class="outer" id="outerid">
        <div class="middle">
            <div class="inner">
                清平调词三首<br/>
                其一<br/>
                云想衣裳花想容，春风拂槛露华浓。<br/>
                若非群玉山头见，会向瑶台月下逢。<br/>
                其二<br/>
                一枝红艳露凝香，云雨巫山枉断肠。<br/>
                借问汉宫谁得似，可怜飞燕倚新妆。<br/>
                其三<br/>
                名花倾国两相欢，长得君王带笑看。<br/>
                解释春风无限恨，沉香亭北倚阑干。<br/> 

            </div>
        </div>
    </div>
       
</body>
</html>