水平居中和垂直居中

最新推荐文章于 2024-04-06 11:20:05 发布

flyabovegrass

最新推荐文章于 2024-04-06 11:20:05 发布

阅读量173

点赞数 1

分类专栏： css

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

今天去听别人的宣讲会的时候，笔试到一个关于水平居中和垂直居中的问题，脑子有点懵，回来做一个小小的总结。

以下的例子用到的html代码：

<div class="container1">
        <div class="centerdiv">这是要居中的内容</div>
    </div>

水平居中

对于inline的元素，可以再父元素直接设置text-align:center;## 标题

这么做有一个缺点，行内元素不可以设置元素的高度、宽度及顶部和底部边距不可设置.

对于两个块级元素，可以用外边距解决

      .container1{
            text-align: center;
            width: 700px;
            height: 100px;
            background: #ffffaa;
        }
        .centerdiv{           
            background-color: bisque;
            width: 400px;
            margin: 0px auto;
        }

多个div并排居中：父元素text-align:center,子元素inline-block。由于inline-block的存在，div之间会存在一个小空隙。

   <style>
  	            .container1{
  	                text-align: center;
  	                width: 700px;
  	                height: 100px;
  	                background: #ffffaa;
  	            }
  	            .centerdiv{           
  	                background-color: bisque;
  	                width: 100px;
  	                border: 1px solid;
  	                display: inline-block;
  	            }
  	        </style>
  </head>
  <body>
      <div class="container1">
          <div class="centerdiv">这是要居中的内容</div>
          <div class="centerdiv">这是要居中的内容2</div>
          <div class="centerdiv">这是要居中的内容3</div>
          <div class="centerdiv">这是要居中的内容4</div>
      </div>
  </body>

多个div并排flex方案居中，父元素display：flex；justify-content：center；。这样子做呢，会让div之间没有空隙，需要自家添加margin。

<style>
        .container1{
            width: 700px;
            height: 100px;
            background: #ffffaa;
            ******display:flex;
            justify-content:center;******
        }
        .centerdiv{           
            background-color: bisque;
            width: 100px;
            border: 1px solid;
        }
    </style>
</head>
<body>
    <div class="container1">
        <div class="centerdiv">这是要居中的内容</div>
        <div class="centerdiv">这是要居中的内容2</div>
        <div class="centerdiv">这是要居中的内容3</div>
        <div class="centerdiv">这是要居中的内容4</div>
    </div>
</body>

垂直居中

将子元素的高度和行高都设置成和父元素一样。存在的问题：如果子元素的宽度不够，元素的内容就会直接出现在父元素之外。

.container1{
            background: red;
            width: 700px;
            height: 100px;
        }
        .centerdiv{           
            background-color: bisque;
            width: 200px;
            height: 100px;
            line-height: 100px;
        }

确定高度的子div，不可以简单的通过行高去使他垂直居中。可以使用父元素display: table-cell;vertical-align:middle;子元素display：inline-block;

        .container1{
            background: red;
            width: 700px;
            height: 100px;
            display: table-cell;
            vertical-align:middle;
        }
        .centerdiv{           
            background-color: bisque;
            width: 200px;
            height: 60px;
            display: inline-block;
        }

多个div垂直居中也可以同2的方法，但是由于inline-block的存在，div之间会存在一定的间距。效果图

水平垂直居中

已知高度和宽度的元素，

  .item{
    top: 50%;
    margin-top: -50px;  /* margin-top值为自身高度的一半 */
    position: absolute;
    padding:0;
}

2.水平垂直居中：已知高度和宽度的元素解决方案

.centerdiv{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -75px;  /* 设置margin-left / margin-top 为自身高度的一半 */
    margin-left: -75px;
}

3.水平垂直居中：未知高度和宽度元素解决方案

.centerdiv{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  /* 使用css3的transform来实现 */
}

4.水平垂直居中：使用flex布局实现

。container{
    display: flex;
    justify-content:center;
    align-items: center;
    /* 注意这里需要设置高度来查看垂直居中效果 */
    background: #AAA;
    height: 300px;
}

转载自：
烟波浩袅 http://www.cnblogs.com/notepades/p/6178510.html