为什么垂直居中效果不能实现？

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>背景</title>
    <style>
     /*此处写代码*/
     div.box{
         width:650px;
         height:650px;
         margin:0 auto;
     }
     div.content{background-image:url(http://img1.sycdn.imooc.com/climg//58dc9d360001d65806500650.jpg);
         width:650px;
         height:650px;
         display:inline-block;

         text-align:center;
         /*display:table-cell; */
         vertical-align:middle;
     }

    </style>
</head>
<body>
    <div class="box">
    <div class="content">
        《长歌行》
        <br>
        <br>青青园中葵，朝露待日晞。
        <br>阳春布德泽，万物生光辉。
        <br>常恐秋节至，焜黄华叶衰。
        <br>百川东到海，何时复西归。
        <br>少壮不努力，老大徒伤悲。
        <br>
    </div>
    </div>
</body>
</html>

蒲公英灵 2018-10-22

源自：CSS背景和列表 2-6 编程练习

收起

1回答

妮可妮可妮_ 2018-10-22 14:23:31

display:inline-block;设置的当前div属性还是块对象呈递，但是允许同一级别的div在同一行内，也可以设置宽度和高度！vertical-align属性只对行内元素有效，对块内元素无效所以没有实现垂直居中效果,

祝学习愉快!

收起回答

提问者蒲公英灵 #1

那在这个题目中，如果要实现水平和垂直方向的居中，要想用display:inline-block来实现垂直居中，可以做到吗？

2018-10-22 17:52:59
妮可妮可妮_ 回复提问者蒲公英灵 #2

你好同学,后面课程我们会学到定位,通过设置定位就可以实现水平垂直居中的效果啦~

2018-10-22 18:09:04