首页 > 技术文章 > 问题记录之-----div中多行文字垂直居中

yujiekangweb 2017-07-26 14:00 原文

直接上代码,核心是用父div{position:relative},子span{position:absolute;transform: translate3d(0, -50%, 0)}

html代码:

<div class="main_box">
                <span v-if="poisonDay == 1">&nbsp&nbsp&nbsp&nbsp别人身材好训练猛才说不介意多吃,你多吃可不就是胖了吗!说你呢,还不运动去!</br></span>
            </div>

css代码:

.main_box {
                font-size: 26px;
                color: white;
                width: 500px;
                margin: 0 auto;
                height: 180px;
                position: relative;
                span {
                    position: absolute;
                    top: 50%;
                    transform: translate3d(0, -50%, 0);
                }
            }

 

推荐阅读