垂直居中的幾種實現方式

時間 2019-12-06

標籤垂直居中幾種實現方式简体版

原文原文鏈接

相比較水平居中，垂直居中比較複雜點。尤爲是在實際頁面中，有不少特殊的場景，致使水平居中實現起來比較麻煩。這篇文章旨在紀錄一些我知道的居中方式。以一道經典面試題爲例：一個200*200的div在一個div水平垂直居中，用css實現。css

首先定義元素

<!--dom層：和垂直居中無關的樣式直接定義在style裏。-->
<body>
    <div class="margin" style="width: 500px;height: 500px;background-color: aqua">
        <div class="center" style="width: 200px;height: 200px;background-color: antiquewhite"></div>
    </div>
</body>

1.百分比的方式

百分比是最基礎的方法。
缺點：必須知道居中元素的實際大小。根據實際大小用margin進行調整，由於top，left是以元素的上邊框進行計算的。前端

<style>
    .center {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -100px;
      margin-left: -100px;
    }
    
    .margin{
      position: relative;    //外層元素必須定義爲relative，不然是相對整個屏幕水平垂直居中
    }
</style>

2.百分比結合transform

優勢：利用transform改良上面那種必須知道元素大小的限制。css3

<style>
    .center{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    
    .margin{
      position: relative;
    }
</style>

3.flex佈局

Flex佈局(彈性佈局)，做爲css3新增的佈局方式，能很好的支持不一樣的屏幕大小，絕對是如今的前端工程師必備技能。面試

<style>
    .margin {
            display: flex;
            justify-content: center;
            align-items: Center;
        }
  </style>

4.flex佈局結合margin

.margin{
            display: flex;
        }
        
    .center{
            margin: auto;
        }

5.絕對定位和0

.margin{
            position: relative;
        }

    .center{
            overflow: auto;
            margin: auto;
            position: absolute;
            top: 0; left: 0; bottom: 0; right: 0;
       }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。