DIV水平居中除了margin:auto;还有什么方法? -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

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

杨冬芳 2016-06-16 14:47:35 1498

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

分享到
取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:40:53

    方法一:使用 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;
    }   
    0 0
云计算
使用钉钉扫一扫加入圈子
+ 订阅

时时分享云计算技术内容,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

推荐文章