flex布局怎么讓盒子垂直水平居中？

這里有兩種形式，一種是元素寬度和高度固定的情況，一種是元素寬度和高度不固定的情況。

在元素寬度和高度不變的情況下

A.絕對定位負邊距

使用絕對定位絕對和邊距來完成元素居中，具體例子如下:

給父元素加上相對定位，給子元素加上絕對定位，用margin的負子元素的一半寬度和高度來實現(xiàn)元素的居中，這種方法不常用。

優(yōu)點:簡單易懂，兼容性好。

缺點:需要給出定子元件的寬度和高度。

B.絕對定位margin:汽車

使用絕對定位和margin:auto自動對中方法對元素進行對中。例子如下:

像上面的例子一樣給父元素添加相對定位，給子元素添加絕對定位，并將元素的左、右、上、下位置設(shè)置為零，然后使用自動居中方法margin:自動完成元素的垂直和水平居中。這種方法很常用。

優(yōu)點:簡單易懂，兼容性好。

缺點:代碼量大，占用內(nèi)存

利用css的tabl:0auto來完成元素的垂直和水平居中，這是不常用的。

優(yōu)點:兼容性好。

缺點:出來的太早，現(xiàn)在不流行。

使用2d位移將元素置中。例子如下:

只需操作子元素，給子元素添加transform屬性，使用2ddisplacementtranslate將父元素的寬度和高度分別向左和向右移動，完成元素的垂直和水平對齊。這種方法不常用。

優(yōu)點:代碼簡單。

缺點:必須給出定子元件的寬度和高度，否則無法完成元件對中。

在不確定元素寬度和高度的情況下

行高

為元素設(shè)置line-right，即line-height，完成元素的居中。具體例子如下:

我們設(shè)置子元素的行高來完成元素的垂直居中，然后使用text-align方法來完成水平居中，這是最簡單的方法，也是我們經(jīng)常使用的方法。

優(yōu)點:編寫簡單，兼容性好。

缺點:只適合單行文字的居中，不適合多行文字。

B.絕對定位加平移

我們以前說過一個元素通過平移來完成垂直和水平對中，這里對這種方法做了進一步改進，即可以在不設(shè)置寬度和高度的情況下實現(xiàn)元素的垂直和水平對中，并完成元素通過平移和絕對定位來實現(xiàn)。例子如下:

在這里，不同的是我們可以在translate中直接使用百分比來完成位移，從而實現(xiàn)元素的垂直和水平居中。這種方法很常用(但我不不要經(jīng)常用。

優(yōu)點:代碼簡單，兼容性好。

缺點:無

c.柔性

Flex形成一個有彈性的盒子。我們可以用彈性盒子做很多事情，其中最重要的是布局。當然，我們贏了。;這里就不贅述了。讓讓我們來討論一下如何讓一個元素垂直和水平居中。例子如下:

我們讓父元素形成一個彈性框，然后設(shè)置主軸對齊居中，邊軸對齊居中，完成元素的垂直和水平居中。這種方法經(jīng)常被使用。

優(yōu)點:代碼簡單易懂。

缺點:PC端兼容性不好

d.fl:auto

這個方法與上面的不同之處在于，這里沒有使用彈性框中的屬性，而是元素直接與margin對齊。示例如下:

讓父元素形成一個彈性框，然后給子元素添加Margin:auto，完成元素的縱橫居中。這種方法也是常用的。

docx文檔怎么垂直居中？

方法/步驟

方法一:在word文檔中，選中所有單詞，然后選擇工具欄中的居中按鈕。

點擊頁面布局，選擇頁面設(shè)置進入，然后點擊布局設(shè)置頁面垂直對齊居中，再點擊確定。

方法2:單擊插入，選擇一個文本框，然后單擊繪制文本框，繪制一個水平文本框。

輸入文本，單擊“對齊文本”，選擇“居中對齊”，然后手動將文本框拖到適當?shù)奈恢谩?/p>