CSS3 把內容放中間 在編寫網頁時，我們常常需要將某些內容放置在網頁的正中間。在過去，我們可能會使用一些復雜的布局技巧，比如通過設置絕對位置來實現。但是現在，CSS3 提供了更簡單的方法。 使用 margin 屬性 要將內容垂直居中，我們可以使用 margin 屬性來設置元素的上下外邊距。在實際應用中，我們通常會將上下邊距設置成相等的值。具體實現如下： `````` 上面的代碼演示了一種使用 margin 屬性將內容垂直居中的方式。我們使用的是 flex 布局，它可以讓我們更方便地控制容器和其內部元素的布局。在這個例子中，我們通過設置容器的 `display` 屬性為 `flex`，并使用 `justify-content` 和 `align-items` 屬性將其水平和垂直居中。我們還在內容元素中設置了 `margin: 0 auto;`，這可以讓它在水平方向上居中。 使用 table 屬性 還有一種方法可以將內容垂直居中，就是使用 table 屬性。代碼如下： `````` 在這個例子中，我們將容器的 `display` 屬性設置成了 `table`，這會將其像表格一樣進行布局。我們還設置了容器的 `width` 和 `height` 屬性為 100%，這可以讓它占據整個網頁的空間。在內容元素中，我們使用了 `display: table-cell;` 讓它變成一個表格單元格。接著，我們使用了 `vertical-align` 屬性將其垂直居中，并使用了 `text-align` 屬性將其水平居中。 總結 使用 CSS3 垂直居中內容非常容易，我們只需要使用 margin 或 table 屬性就可以了。另外，`flex` 布局還可以讓我們更方便地控制容器和其內部元素的布局。挑選一種方式，讓我們在編寫網頁時變得更加便捷。