css3中的垂直居中布局(垂直或居中)

    xiaoxiao2021-12-14  21

    经常我们需要对我们网页的元素进行垂直或是居中定位,在非ie,或是移动端的页面中可以使用如下代码来实现:

    <html>     <head>     <style type="text/css">          #container{          display: box;          display: -webkit-box;          display: -moz-box;          width:100%;          height: 100%;          border: 1px solid #ccc;  /*         -webkit-box-pack:center;          -moz-box-pack:center;  */         -webkit-box-align:center;          -moz-box-align:center;          }          #div1{          background: orange;         }          #div2{          background: yellow;          }          #div3{          background: green;          }          </style>      </head>     <body>         <div id="container">          <div id="div1">列1</div>          <div id="div2">列2</div>          <div id="div3">列3</div>  <div><img src="img.png" width="200px" height="200px"></img></div>         </div>      </body> </html>

    转载请注明原文地址: https://ju.6miu.com/read-962216.html

    最新回复(0)