近年來，前端開發越來越受歡迎，CSS作為構建網頁樣式的重要一環，被開發者們廣泛應用。在良好的前期設計規劃下，有些情況下只需要極少的CSS代碼即可達到優美的效果。接下來，我們就來看一段僅有12行的優美CSS代碼。

body {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.box {
width: 100px;
height: 100px;
background-color: #f00;
}

這12行的CSS代碼能夠實現什么效果呢？我們先簡單介紹一下：

首先，我們給body元素添加了margin和padding屬性，讓整個頁面沒有多余的邊距和內邊距。接下來，我們給一個父級元素container設置了彈性布局，讓子元素水平垂直居中，并且讓其高度占據整個視口高度。最后，通過添加.box類，為子元素添加定寬定高的紅色背景方塊。

這12行CSS代碼展現了CSS強大的功能，同時也體現了精益求精的編碼哲學。在實際的開發過程中，我們也應該盡可能地減少代碼量，提高代碼質量與可維護性。