css文字垂直居中

css文字垂直居中

demo

 <div id="beach">
            <div id="xuanfu">
                <p>The end of Noosa’s relaxed and chilled main beach</p>
            </div>
        </div>

#beach{
    background-image: url("../image/slideshow-quote-04.jpg");
    width: calc(100% - 70);
    height: 468px;
    background-size: 100%;
    padding-top: 70px;
    padding-left: 70px;
}
#xuanfu{
    width: 395px;
    height: 315px;
    background-color: rgba(255, 255, 255, 0.73);
    padding: 40px 0;
    vertical-align:middle;
    display:table-cell;
}
#xuanfu>p{
    width: 320px;
    margin: 0 auto;
    color: #2e91b3;
    font-size: 40px;
    text-align: center;
}

效果图如下

一、单行文字的垂直居中

解决方案：line-height方法

css

.box{ border:1px solid #f00; background-color:#eee; width:500px; height:100px;line-height:100px;}

二、多行文字的垂直居中

解决方案：vertical-align 方法

css

  .box{ border:1px solid #f00; background-color:#eee; width:500px; height:100px;vertical-align:middle;display:table-cell;}
  .text{}