开发者社区> 问答> 正文

DIV水平居中除了margin:auto;还有什么方法?

全页面就只有一个DIV,设置了他的宽高和颜色。
除了margin:auto;还有什么方法可以让他水平居中?
另外也别使用绝对布局。

展开
收起
杨冬芳 2016-06-16 14:47:35 2388 0
1 条回答
写回答
取消 提交回答
  • IT从业

    方法一:使用 display: inline-block,然后父级元素 :text-align:center;,同时,自己 text-align: left还原
    方法二:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8"/>
      <title>Centering an Element on the Page</title>
    </head>
    <body>
      <h1>OMG, I’m centered</h1>
    </body>
    </html> 
    html {
      height: 100%;
    } 
    
    body {
      display: -webkit-box;  /* 老版本语法: Safari,  iOS, Android browser, older WebKit browsers.  */
      display: -moz-box;    /* 老版本语法: Firefox (buggy) */ 
      display: -ms-flexbox;  /* 混合版本语法: IE 10 */
      display: -webkit-flex;  /* 新版本语法: Chrome 21+ */
      display: flex;       /* 新版本语法: Opera 12.1, Firefox 22+ */
    
      /*垂直居中*/  
      /*老版本语法*/
      -webkit-box-align: center; 
      -moz-box-align: center;
      /*混合版本语法*/
      -ms-flex-align: center; 
      /*新版本语法*/
      -webkit-align-items: center;
      align-items: center;
    
      /*水平居中*/
      /*老版本语法*/
      -webkit-box-pack: center; 
      -moz-box-pack: center; 
      /*混合版本语法*/
      -ms-flex-pack: center; 
      /*新版本语法*/
      -webkit-justify-content: center;
      justify-content: center;
    
      margin: 0;
      height: 100%;
      width: 100% /* needed for Firefox */
    } 
    /*实现文本垂直居中*/
    h1 {
      display: -webkit-box; 
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
    
      -webkit-box-align: center; 
      -moz-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    
      height: 10rem;
    }   
    2019-07-17 19:40:53
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载