CSS实现div水平垂直居中的几种方法

转自：https://www.cnblogs.com/hutuzhu/p/4450850.html，请尊重原创。
<!DOCTYPE html>
<html>
  <head>
    <title>水平，垂直居中实现的集中方式</title>
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
        /* 方法1，内容水平垂直居中：表格布局法，table-cell */
        .box1{
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            /* 方便展示效果 */ 
            border: 1px solid red;
            width: 600px;
            height: 300px;
        }
        /* 
           content 可以动态改变高度(不需在 CSS 中定义)，
              当 没有足够空间时，content 不会被截断
         */
        
        /* 方法2,内容水平垂直居中：display:flex */
        .box2{
            display: flex;
            justify-content:center;
            align-items:Center;
            /* 方便展示效果 */
            border: 1px solid red;
            height: 300px;
        }
        
        /* 方法3，div盒子居中：绝对定位和负边距 */
        .box3 span{
         position: absolute;
         width:400px;
         height:200px;
         left:50%;
         top:50%; 
         margin-left:-200px;/* 盒子本身宽度的一半 */
         margin-top:-100px;/* 盒子本身高度的一半 */
         /* 方便展示效果 */ 
         border:1px solid #00F;
     }

     /* 
            优点：
                     适用于所有浏览器，任何分辨率的屏幕，不需要嵌套标签

            缺点：
                      没有足够空间时，content 会消失(类似div 在 body 内，当用户缩小浏览器窗口，滚动条不出现的情况)
      */
      
        /* 方法4：绝对定位和0 */
        .box4 span{
          width: 50%; 
          height: 50%; 
          --background: #000;
          overflow: auto; 
          margin: auto; 
          position: absolute; 
          top: 0; left: 0; bottom: 0; right: 0;
          /* 方便展示效果 */ 
          border:1px solid #00F;
        }
        /* 
          这个方法使用了一个 position:absolute，有固定宽度和高度的 div。
          这个 div 被设置为 top:0; bottom:0;。
          但是因为它有固定高度，其实并不能和上下都间距为 0，
           因此 margin:auto; 会使它居中。
           使用 margin:auto;使块级元素垂直居中是很简单的。
           
           不过这里得确定内部元素的高度，可以用百分比，比较适合移动端。
           
          优点：
                           简单粗暴,代码简单,其实设计者当初也根本没想到也能这样用,
                           但是聪明的大家硬是凿出了一条简单的路。

                  缺点：
             IE(IE8 beta)中无效,无足够空间时，content 被截断，但是不会有滚动条出现
         */
        /* 方法5：translate */
        .box5 span{
            position: absolute;
            top:50%;
            left:50%;
            width:100%;
            transform:translate(-50%,-50%);
            text-align: center;
            /* 方便展示效果 */
            border:1px solid #00F;
             width: 100%;
            height: 300px;
            
            /* 这实际上是方法3的变形，移位是通过translate来实现的 */
        }
        /* 方法6：display:inline-block */
        .box6{
          text-align:center;
          font-size:0;
        }
        .box6 span{
          vertical-align:middle;
          display:inline-block;
          font-size:16px;
        }
        .box6:after{
          content:'';
          width:0;
          height:100%;
          display:inline-block;
          vertical-align:middle;
        }
        /* 该方式未重现居中，暂时保留，以后有时间吗，再找原因*/
        
        
        /* 方法7：display:flex和margin:auto */
        .box7{
            display: flex;
            text-align: center;
            /* 方便展示效果 */
            border:1px solid #00F;
            width: 100%;
            height: 300px;
        }
        .box7 span{
        margin: auto;
        }
        /* 方法8：display:-webkit-box */
        .box8{
            display: -webkit-box; /* 使用flexbox 布局 */
            -webkit-box-pack:center; /* 实现容器内容垂直居中 */
            -webkit-box-align:center; /* 实现容器内的内容水平居中 */
            -webkit-box-orient: vertical; /* 容器内的元素垂直排列 */
            text-align: center
            /* 方便展示效果 */
            width: 100%;
            height: 300px;
            border:1px solid #00F;
        }
        
        /* 方法9：display:-webkit-box */ /* 该方式未重现居中，暂时保留，以后有时间吗，再找原因*/
        .floater {
            float:left; 
            height:50%; 
            margin-bottom:-120px;
        }
        .content {
            clear:both; 
            height:240px; 
            position:relative;
            /* 方便展示效果 */
            border:1px solid #00F;
        }
        /* 
        这种方法，在 content 元素外插入一个 div。
        设置此 div height:50%; margin-bottom:-contentheight;。
        优点： 
            适用于所有浏览器 
            没有足够空间时(例如：窗口缩小) content 不会被截断，滚动条出现

        缺点： 
            唯一我能想到的就是需要额外的空元素了(也没那么糟)
         */
    </style>
</head>
  
  <body>
    <div class="box8">
       <span>内容水平垂直居中</span>
    </div>
    <!-- 方法9专用 -->
    <!-- <div class="floater">Content here</div>
    <div class="content"> Content here </div>  --> 
  </body>
</html>
posted @ 2018-01-05 11:48 达摩院的BLOG 阅读(159) 评论(0) 收藏举报
刷新页面返回顶部
达摩院的BLOG

CSS实现div水平垂直居中的几种方法

公告
