天天看點
傳回

5種CSS實作垂直對齊的方法

5種CSS實作垂直對齊的方法

英文 | https://betterprogramming.pub/5-different-ways-to-vertically-align-your-css-content-6ac864af7f2c

翻譯 | web前端開發

垂直對齊一直是我們需要處理的問題之一。過去，對于開發人員而言，這一直是頭疼的問題。幸運的是，現在借助Flex和Grid等新布局，它現在已成為一項微不足道的任務。

今天，就讓我們一起來看一下所有可用于處理垂直對齊的方法。即使有些方式不是最有用，但學習它們可能會增進你對CSS的了解。

1、Table

在之前，Table布局是HTML中使用最流行的布局之一。通過使用該display屬性，可以強制某些非<table>元素的行為類似于它們。

這是與display表相關的值的清單：

div {
  display: table;
  display: table-cell;
  display: table-column;
  display: table-colgroup;
  display: table-header-group;
  display: table-row-group;
  display: table-footer-group;
  display: table-row;
  display: table-caption;
}

讓我們使用上面的值編寫第一個解決方案的代碼：

<!DOCTYPE html>
<html>


    <head>
        <title>Align Playground</title>
        <meta charset="UTF-8" />
    </head>
    <body>
        <style type="text/css">
            body {
                color: white;
                box-sizing: content-box;
                font-size: 25px;
                text-align: center;
            }


            *, *::before, *::after {
                box-sizing: border-box;
            }


            .title {
                padding: 8px;
                background-color: #5B2E48;
                width: 600px;
                margin: 40px 20px 0px 20px;
            }


            .container {
                width: 600px;
                height: 600px;
                border: 2px solid #5B2E48;
                margin: 0px 20px 20px 20px;
                color: #5B2E48;
            }


            .container-center {
                display: table;
            }


            .container-center div {
                display: table-cell;
                vertical-align: middle;
            }
</style>
        <div class="title">Table</div>
            <div class="container container-center">
                <div>center me</div>
            </div>
        </script>
    </body>
</html>

為了進行垂直對齊，我們使用vertical-alignCSS Table的屬性。

“ vertical-align屬性可以在兩種情況下使用。

-将内聯元素的框在其包含的線框内垂直對齊。例如，它可以用于<img>在一行文本中垂直放置一個。

-垂直對齊表格中單元格的内容。” — MDN Web文檔

請注意，vertical-align在元素block和table元素上的行為确實有所不同。這就是為什麼如果你嘗試使用它将元素放在上居中的原因div，那麼它什麼也不會做。

在我們的示例中，代碼中最重要的部分是：

.container-center {
  display: table;
}
.container-center div {
  display: table-cell;
  vertical-align: middle;
}

使用上面的方法與制作布局表基本相同：

<div class="title">Table</div>
<table class="container">
  <tr>
    <td>center me</td>
  </tr>
</table>

看一下最終效果：

5種CSS實作垂直對齊的方法

讓我們更好地了解：

5種CSS實作垂直對齊的方法

請注意，HTML表應用于表格資料。那是他們唯一的目的，許多人濫用它們。

2、絕對定位

多年來，絕對定位是首選解決方案。在某些特定的複雜情況下，它仍然很有用。

該技術很簡單：

  • position: relative 定義一個居中的容器。
  • position: absolute 定義居中的元素。
  • 使用top: 50%粗略移動元素在螢幕的中間。
  • transateY(-50%) 最終将項目調整到中心。

讓我們在一個示例中使用它：

<!DOCTYPE html>
<html>


    <head>
        <title>Align Playground</title>
        <meta charset="UTF-8" />
    </head>
    <body>
        <style type="text/css">
            body {
                box-sizing: content-box;
                font-size: 25px;
                text-align: center;
                color: #5B2E48;
            }


            *, *::before, *::after {
                box-sizing: border-box;
            }


            .title {
                color: white;
                padding: 8px;
                background-color: #5B2E48;
                width: 600px;
                margin: 40px 20px 0px 20px;
            }


            .container {
                width: 600px;
                height: 600px;
                border: 2px solid #5B2E48;
                margin: 0px 20px 20px 20px;
            }


            .container-center {
                position: relative;
            }


            .container-center div {
                position: absolute;
                width: 100%;
                top: 50%;
                transform: translateY(-50%);
            }
</style>
        <div class="title">Absolute Positioning</div>
            <div class="container container-center">
                <div>center me</div>
            </div>
        </script>
    </body>
</html>

和以前一樣，讓我們從上面的代碼中檢視重要的CSS邏輯：

.container-center {
  position: relative;
}
.container-center div {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}

讓我們看一下結果：

5種CSS實作垂直對齊的方法

結果與上一個非常相似：center me div占據整個水準空間，并且與容器分離。

3、 Flexbox

Flexbox受流行的UI架構（如Bootstrap）的啟發。它的第一份工作草案于2009年7月23日釋出。十一年後，令人驚訝的是，它的支援猛增：約99.2％的浏覽器支援它的使用。

FlexBox帶有内容對齊功能。讓我們介紹一下用例中最相關的兩個：

屬性：align-items

“ CSS 的align-items屬性，将align-self所有直接子級的值都設定為一個組。在Flexbox中，它控制交叉軸上項目的對齊方式。在“網格布局”中，它控制“塊軸”上項目在其網格區域内的對齊。” — MDN Web文檔

屬性：justify-content

“CSS的 justify-content屬性，定義了浏覽器之間，沿着周圍的内容項目配置設定的空間主軸用柔性的容器，和網格容器的字形軸”。— MDN Web文檔

我們可以将兩者結合起來，以使我們的商品在容器的中心對齊Flexbox。這是迄今為止最常用的方法。它是非常簡單，有效的CSS元素之一。

<!DOCTYPE html>
<html>
    <head>
        <title>Align Playground</title>
        <meta charset="UTF-8" />
    </head>
    <body>
        <style type="text/css">
            body {
                box-sizing: content-box;
                font-size: 25px;
                text-align: center;
                color: #5B2E48;
            }


            *, *::before, *::after {
                box-sizing: border-box;
            }


            .title {
                color: white;
                padding: 8px;
                background-color: #5B2E48;
                width: 600px;
                margin: 40px 20px 0px 20px;
            }


            .container {
                width: 600px;
                height: 600px;
                border: 2px solid #5B2E48;
                margin: 0px 20px 20px 20px;
            }


            .container-center {
                display: flex;
                align-items: center;
                justify-content: center;
            }
</style>
        <div class="title">Flex</div>
            <div class="container container-center">
                <div>center me</div>
            </div>
        </script>
    </body>
</html>

讓我們看一下結果：

5種CSS實作垂直對齊的方法

在這裡，我們看到了一種更清潔，更自然的方法。該center me div隻是服用它需要的空間，因為我們使用的調心性能。這是因為Flexbox是在考慮這種用例的情況下建構的。我們可以期待更好的元素。

4、Grid

Grid由Microsoft團隊起草，并于2011年傳遞到Internet Explorer10。像Flex一樣，Grid的功能齊全，并按對齊方式打包。

我們可以像在Flex中那樣使用align-items和使用它justify-content。但是Grid具有用于配置這兩者的簡寫屬性：place-items。

讓我們看一下定義：

“ CSS place-items 速記屬性允許您在相關布局系統（例如Grid或Flexbox）中同時沿塊方向和内嵌方向（即align-items和justify-items屬性）對齊項目。如果未設定第二個值，則第一個值也将被使用。” — MDN Web文檔

這種方法不如Flexbox流行，因為浏覽器對Grid的支援較少。如果您想将某項居中，則使用Grid可能會過大。

<!DOCTYPE html>
<html>
    <head>
        <title>Align Playground</title>
        <meta charset="UTF-8" />
    </head>
    <body>
        <style type="text/css">
            body {
                box-sizing: content-box;
                font-size: 25px;
                text-align: center;
                color: #5B2E48;
            }


            *, *::before, *::after {
                box-sizing: border-box;
            }


            .title {
                color: white;
                padding: 8px;
                background-color: #5B2E48;
                width: 600px;
                margin: 40px 20px 0px 20px;
            }


            .container {
                width: 600px;
                height: 600px;
                border: 2px solid #5B2E48;
                margin: 0px 20px 20px 20px;
            }


            .container-center {
                display: grid;
                place-items: center;
            }
</style>
        <div class="title">Grid</div>
            <div class="container container-center">
                <div>center me</div>
            </div>
        </script>
    </body>
</html>

該代碼與Flex代碼非常相似。通過使用該place-items屬性，實作此行為的代碼極少：

.container-center {
  display: grid;
  place-items: center;
}

如前所述，下面的代碼與上面的代碼等效：

.container-center {
  display: grid;
  align-items: center;
  justify-content: center;
}

讓我們檢查結果：

5種CSS實作垂直對齊的方法

最終結果與Flexbox超級相似。

5、帶有邊距的Flexbox /Grid

與對齊在margin: auto将對象水準居中時仍然很流行。沿會應用均勻的邊距x，進而導緻項目水準對齊。

這是一種非常簡單但有效的方法。但是，margin: auto不能在display: block元素上垂直居中。

但是，Grid和Flexbox現在支援margin: auto将項目垂直和水準居中。

讓我們看一個例子：

<!DOCTYPE html>
<html>


    <head>
        <title>Align Playground</title>
        <meta charset="UTF-8" />
    </head>
    <body>
        <style type="text/css">
            body {
                box-sizing: content-box;
                font-size: 25px;
                text-align: center;
                color: #5B2E48;
            }


            *, *::before, *::after {
                box-sizing: border-box;
            }


            .title {
                color: white;
                padding: 8px;
                background-color: #5B2E48;
                width: 600px;
                margin: 40px 20px 0px 20px;
            }


            .container {
                width: 600px;
                height: 600px;
                border: 2px solid #5B2E48;
                margin: 0px 20px 20px 20px;
            }


            .container-center {
                display: flex;
            }


            .container-center div {
                margin: auto;
            }
</style>
        <div class="title">Flex with margin-auto</div>
            <div class="container container-center">
                <div>center me</div>
            </div>
        </script>
    </body>
</html>

這是所有魔術發生的地方：

// using Flex layout
.container-center {
  display: flex;
}
.container-center div {
  margin: auto;
}
// using Grid layout
.container-center {
  display: grid;
}
.container-center div {
  margin: auto;
}

讓我們檢查結果：

5種CSS實作垂直對齊的方法

這與以前的結果非常相似。由于該元素本身支援，是以浏覽器在定位該元素方面做得很好。但是，這次我們沒有很好的定位線。

在本文中，我們已經看到了将您的内容與CSS垂直對齊的所有主要方法。如前所述，最常用的是Flexbox，因為它超級簡單且具有聲明性。它隻需要最少的代碼，所有代碼都放在父容器中。對Flexbox的支援非常棒，是以你不必擔心使用者的浏覽器将不支援它。

你圖如果還知道其他垂直居中的好方法，歡迎留言交流。

本文完〜

5種CSS實作垂直對齊的方法
html css 用例
上一篇: 2018護網杯_fez_簽到_gettingstartfez簽到gettingstart
下一篇: java簽到_SpringBoot實戰（十八）:簽到獎勵實作方案

繼續閱讀