八哥的面试常考题(二)CSS - 垂直居中

CSS垂直居中布局总结

摘自掘金社区 dev-man《css垂直居中布局总结》

  • 利用绝对定位和负margin

    • 优缺点
      优点:兼容性好 缺点:需要知道居中元素的高度
      // An highlighted block
      .container{
      	width:400px;
      	height:400px;
      	background:#777777;
      	position:relative	
      } 
      .container .content {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        margin-top: -50px;
        left: 50%;
        margin-left: -50px;
        background: #ee5f28;
      } 
      

关于负margin的理解,参照这篇博文

  • 利用绝对定位和transform

    • 优缺点
      优点:不需要考虑content高度 缺点:兼容性
      	// An highlighted block
       .container {
        background: #777777;
        height: 400px;
        position: relative;
      }
      
      .container .content {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        background: #ee5f28;
      }
    
    
  • 利用绝对定位和calc

    • 优缺点
      优点:不需要考虑content高度 缺点:兼容性
    // An highlighted block
    .container {
      background: #777777;
      height: 400px;
      position: relative;
    }
    
    .container .content {
      width: 100px;
      height: 100px;
      position: absolute;
      top: calc(50% - 50px);
      left: calc(50% - 50px);
      background: #ee5f28;
    }
    
    
  • 震惊absoulute(绝对定位)还可以这样用

    • 优缺点
      1.跨浏览器,兼容性好(无需hack,可兼顾IE8~IE10);
      2.无特殊标记,样式更精简;
      3.自适应布局,可以使用百分比和最大最小高宽等样式;
      4.居中时不考虑元素的padding值(也不需要使用box-sizing样式);
      5.布局块可以自由调节大小;6.img的图像也可以使用
      6.浏览器支持:Chrome、Firefox、Safari、Mobile Safari、IE8-10。 “完全居中”经测试可以完美地应用在最新版本的Chrome、Firefox、Safari、Mobile Safari中,甚至也可以运行在IE8~IE10上
    // An highlighted block
    .container {
      background: #777777;
      height: 400px;
      position: relative;
    }
    
    .container .content {
      width: 100px;
      height: 100px;
      background: #ee5f28;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
    
    
  • 使用inline-block

    • 优缺点
      • 内容高度可变
      • 内容溢出则能自动撑开父元素高度
      • 浏览器兼容性好,甚至可以调整支持IE7

注意:容器‘container’里要设置font-size:0;避免inline-block之间产生间隔

// An highlighted block
.container {
 background: #777777;
 height: 400px;
 text-align: center;
 font-size: 0;
 overflow: auto;
}

.container::after {
 content: '';
 display: inline-block;
 height: 100%;
 vertical-align: middle;
}

.container .content {
 display: inline-block;
 vertical-align: middle;
 width: 100px;
 height: 100px;
 background: #ee5f28;
}

  • 使用table与table-cell

    • 优点:
      • 内容高度可变
      • 内容溢出则能自动撑开父元素高度
      • 浏览器兼容性好
    	
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Documenttitle>
      <style>
        .container-table {
          background: #777777;
          height: 400px;
          width: 100%;
          display: table;
        }
    
        .container-table .container-cell {
          display: table-cell;
          vertical-align: middle;/* 这里达到了垂直居中的效果 */
        }
    
        .container-table .container-cell .content {
          width: 100px;
          height: 100px;
          margin: 0 auto;/* 利用margin值 水平居中*/
          background: #ee5f28;
        }
      style>
    head>
    
    <body>
      <div class="container-table">
        <div class="container-cell">
          <div class="content">div>
        div>
      div>
    body>
    
    html>
    

你可能感兴趣的:(前端,CSS,面试相关)