如何垂直等分CSS

在CSS中，垂直等分可以通過使用flexbox布局來實(shí)現(xiàn)，F(xiàn)lexbox是一種靈活的布局方式，可以輕松地實(shí)現(xiàn)元素的垂直和水平對(duì)齊。

要實(shí)現(xiàn)垂直等分，您可以將容器的高度設(shè)置為100vh（視口高度），然后將子元素的高度設(shè)置為50%，這樣，每個(gè)子元素都將占據(jù)容器高度的一半。

如果您有一個(gè)包含兩個(gè)子元素的容器，您可以這樣寫CSS代碼：

.container {
  height: 100vh;
  display: flex;
  align-items: center; /* 可選，如果子元素需要水平對(duì)齊 */
}
.sub-element {
  height: 50%;
  flex: 1; /* 可選，如果子元素需要平分容器寬度 */
}

在這個(gè)例子中，.container是容器元素，.sub-element是子元素，通過將容器的高度設(shè)置為100vh，并將子元素的高度設(shè)置為50%，我們可以實(shí)現(xiàn)容器的垂直等分，如果您需要子元素在容器內(nèi)水平對(duì)齊，可以添加align-items: center;，如果您需要子元素平分容器的寬度，可以添加flex: 1;。

這種方法可以實(shí)現(xiàn)CSS的垂直等分，而且代碼簡單易懂，易于維護(hù)。