css三種水平居中方式-tft每日頭條

css三種水平居中方式（CSS水平垂直居中布局方案概述）1

在前端開發中，通過CSS實現布局容器的居中，也有諸多方法方式，當然也是CSS面試題中的經典面試題，在本文章中會系統的分析綜述通過 Flexbox 布局模塊與 CSS Grid布局模實現容器的居中效果。

在傳統解決方案，基于盒狀模型，依賴 display屬性 position屬性 float屬性來實現基本布局，包括本文章的居中排列。

1 Flexbox中實現水平垂直居中1.1 Flexible Box 的簡述

在2009年，W3C提出出的 Flex 布局方案，Flex是Flexible Box的縮寫，可意為”彈性布局”，任何一個容器都可以指定為Flex布局，可用來為盒狀模型提供最大的靈活性。

采用Flex布局的元素，稱為Flex容器（flex container），以下稱為 Flexbox ，Flex容器中的所有子元素稱為Flex項目（flex item）。

任何一個容器都可以指定為Flex布局，如下所示：

.box{ display: flex; }

或者是

.box{ display: inline-flex; }

可點擊這裡查看 CSS中flex和inline-flex的區别

Flexbox 默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end，如下圖所示：

css三種水平居中方式（CSS水平垂直居中布局方案概述）2

1.2 Flexible Box 中子 Item的居中對齊

在Flexbox布局模塊中，使其子 Item (flex item) 居中對齊（水平方向與豎直方向全部居中），如下圖 1-1 所示效果：

css三種水平居中方式（CSS水平垂直居中布局方案概述）3

1.2.1 實現方式一隻設置 Flex容器的屬性

如圖 1-1 中所示的效果，隻需要在Flex容器上設置justify-content、align-items的值為center時，可以讓元素在Flex容器中達到水平垂直居中的效果，如下代碼清單1-2所示：

/*代碼清單1-2*/ <div class="flex__container"> <div class="flex__item"></div> </div>

/*Flex 容器*/ .flex__container { display: flex; justify-content: center; align-items: center; width: 300px; height: 300px; background-color: gray; } /*Flex 子 Item */ .flex__item { width: 100px; height: 100px; background-color: aqua; }

justify-content 用來設置水平居中，如下圖1-3所示：

css三種水平居中方式（CSS水平垂直居中布局方案概述）4

align-items 用來限制豎直居中，如下圖1-4所示：

css三種水平居中方式（CSS水平垂直居中布局方案概述）5

如下圖1-2中所示，将Flex容器中的子Item增加為 4 個，此種方法設置的居中效果依然有效果。

css三種水平居中方式（CSS水平垂直居中布局方案概述）6

圖 1-2 中對應的代碼如下：

/*代碼清單1-3*/ <div class="flex__container"> <div class="flex__item"></div> <div class="flex__item"></div> <div class="flex__item"></div> <div class="flex__item"></div> </div>

/*Flex 容器*/ .flex__container { display: flex; justify-content: center; align-items: center; /*flex-direction: column;*/ /*display: inline-flex;*/ width: 300px; height: 300px; background-color: gray; } /*Flex 子 Item */ .flex__item { width: 50px; height: 50px; margin-left: 10px; margin-top: 10px; background-color: aqua; }

1.2.2 實現方式二同時設置 Flex容器屬性與其子Item的屬性

/*Flex 容器*/ .flex__container { display: flex; justify-content: center; } /*Flex 子 Item */ .flex__item { align-self: center; }

對應的 Html 層級代碼如下：

<div class="flex__container"> <div class="flex__item"></div> <div class="flex__item"></div> </div>

1.2.3 Flex容器中的 Item 設置margin: auto

如果在Flex容器中隻有一個子 Item ，可以在 Item中顯式的設置margin的值為auto，也可以實現水平垂直居中效果，如下圖1-5所示：

css三種水平居中方式（CSS水平垂直居中布局方案概述）7

2 Grid 布局中實現水平垂直居中

Css 中的 Grid 布局可稱為 CSS Grid Layout Module ，是CSS為布局新增的一個模塊，簡單的理解為 Grid 布局，是一個網絡布局，任何一個容器都可以指定為 Grid 布局，如下所示：

.box{ /*或者 inline-grid */ display: grid; }

在 Grid 布局中，實現其子 Item的垂直水平居中效果可直接配置 place-items 為 center ，如下圖 1-6所示：

/*Grid 容器*/ .flex__container { /*或者 inline-grid */ display: grid; place-items: center; }

css三種水平居中方式（CSS水平垂直居中布局方案概述）8

完畢