水平垂直居中案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>vertical-align</title>
    <style type="text/css">
        *{padding:0px;margin: 0px;}

        .warp1{
            height:80px;
            width: 100%;
            background-color: #14191e;
            /*在此补充代码*/
            line-height: 80px;

        }

        .warp1 h1{ color:#fff;
            /*在此补充代码*/
            text-align:center;}

        .warp2{
            height:400px;
            width: 100%;
            border:1px  #14191e solid;
            /*在此补充代码*/
            display:table;

        }

        .content{
            /*在此补充代码*/
            vertical-align: middle;
            display:table-cell;
            text-align:left;
        }

        .content  p{ width:500px;
            font-family: "微软雅黑";
            margin:0 auto;
            /*在此补充代码*/}

    </style>
</head>
<body>
<div class="warp1">
    <h1>hello world</h1>
</div>
<div class="warp2">
    <div class="content">
        <p>服装纺织：品牌降速 荐8股</p>
        <p>行业观点在终端消费支出预期放缓的背景下，Q3品牌端经营承压；17Q4及18Q1基数偏高，进一步加剧对品牌企业后续经营及库存消化能力的担忧。从跟踪情况来看，一方面14年以来品牌企业加大供应链效率优化投入，前期渠道铺货状态更显良性；另一方面，18Q2以来代表性品牌企业均快速调整发货及拓店节奏，经营灵活性明显提高。我们认为，未来两个季度收入端增长压力确实存在，但基于灵活的经营策略，库存消化及费用管控能力较优，业绩端有望实现稳增长。</p>
    </div>
</div>

</body>
</html>
水平垂直居中案例

猜你喜欢
