问题记录之-----div中多行文字垂直居中

Posted 2020-09-29 糊涂一点web

直接上代码，核心是用父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);
                }
            }