在前端開發中，CSS 布局是一項非常重要的技能。在布局中，數學是一種基礎工具，可以幫助我們更好地實現設計。下面就來介紹一下 CSS 數學布局。

首先，我們需要知道，CSS 中的尺寸單位有像素（px）、百分比（%）、視窗寬度（vw）、視窗高度（vh）等等。其中，百分比是非常常用的一個單位。它可以相對于父元素的尺寸進行計算。

.box {
width: 50%; /* 相對于父元素的寬度，占用一半 */
}

然而，光有百分比還不夠。有時候，我們需要在元素中間放置另一個元素，那么該怎么做呢？這時候，我們就需要用到相對定位了。

.box {
position: relative; /* 聲明為相對定位，這樣子元素才能以它為基準 */
}
.inner {
position: absolute; /* 聲明為絕對定位 */
top: 50%; /* 先向下移動 50% 的高度 */
transform: translate(0, -50%); /* 再向上移動自身的一半高度 */
}

使用這樣子的技巧，可以輕松實現元素的水平居中和垂直居中。

接下來，再介紹一下 flex 布局。這是最近比較流行的一種布局，可以輕松實現兩列等高布局、自適應多列布局等等。我們可以通過給父容器設置 display: flex; 來開啟 flex 布局。

.container {
display: flex; /*開啟 flex 布局*/
justify-content: center; /*水平居中*/
align-items: center; /*垂直居中*/
}

以上就是 CSS 數學布局的介紹。希望這篇文章能夠對前端開發者有所幫助，謝謝！