垂直居中问题

以下代码中，如果我把margin:0 auto设置在.content里面，为什么不能达到水平居中呢？如果把.content p中的属性直接设置在.content里面可以吗？求助。。。谢谢！

<!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;
              text-align:center;
           /*在此补充代码*/
             }

     .warp1 h1{ color:#fff;
       font-size:24px;}

     .warp2{
              height:400px;
              width: 100%;
              border:1px #14191e solid;
              display:table;

              /*在此补充代码*/
             }

     .content{
             display:table-cell;
             vertical-align:middle;
            }

     .content p{ width:500px;
                  font-family: "微软雅黑";
                  margin:0 auto;
                  line-height:1.5em;
                 font-size:14px;
     }

   </style>
</head>
<body>
<div class="warp1">
          <h1>欢迎来到慕课网</h1>
</div>
<div class="warp2">
        <div class="content">
           <p>慕课网，只学有用的！</p>
           <p>慕课网（IMOOC）是IT技能学习平台。慕课网(IMOOC)提供了丰富的移动端开发、php开发、web前端、android开发以及html5等视频教程资源公开课。并且富有交互性及趣味性，你还可以和朋友一起编程。</p>
        </div>
</div>
</body>

</html>

慕尼黑4757019

浏览 1002回答 1

1回答

奋斗好青年

垂直居中的方法多种多样,根据需求来写,你这种方式实现也是可以的

2 0

随时随地看视频慕课网APP