眾所周知，在CSS中想要將一個元素居中是一件非常常見的事情。但是，可能很多人都會有這樣的感覺：居中怎么那么麻煩呢？下面來看一下為什么居中對于很多人來說那么不友好。

首先，我們來看一下居中的幾種方式：

居中方式一：text-align:center;
居中方式二：margin-left:auto;margin-right:auto;
居中方式三：position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);

當然，這些方式不僅僅只有這三種，還有如flex以及grid布局等方式也可以實現居中效果，但是我們這里就不再一一贅述了。接下來，我們來分析一下居中那么麻煩的原因。

首先，無論是text-align:center;還是margin:auto;都必須保證當前元素必須為塊級元素且具有寬度才能起作用，否則會失效。因此，對于一些元素（如img、input等）需要設置display:block;或width屬性才能實現居中，這就增加了開發者的代碼量。

第二，position:absolute;的方式需要配合top與left屬性，而且需要一個父級容器來設置position:relative;，這樣才能實現相對定位。其次，這種方式對于不確定寬高的元素來說就沒有那么方便了，因為需要自行計算一下偏移量，這增加了代碼的難度與復雜度。

第三，使用flex以及grid布局雖然可以比較輕松地實現元素居中，但是這兩種布局都需要在父級容器中設置display:flex;和display:grid;，并且對于一些苛刻的需求（如IE8以下瀏覽器的兼容性），這兩種方式就不是很好用了，而且需要開發者有一定的布局技巧。

因此，盡管居中方式看起來簡單，但是細節非常繁瑣。那些不熟悉CSS的開發者肯定會對居中這一功能又愛又恨，對于那些專業的前端工程師，其實也應該注意代碼的可維護性與可擴展性，讓代碼更加的簡潔易懂。