## 水平居中有哪些方式 **考察點** 1. 水平居中的方式 2. 各種居中方式的優缺點 **回答** 1. css中的`text-align:center`可以設置文本和行內元素居中。缺點是：內容參差不齊，排版比較難看，且子元素默認也是水平居中。 2. css中同時設置`margin-left:auto` 和 `margin-right: auto`。缺點是： `margin-left`和`margin-right`被占用，無法設置。 3. css設置`margin-left:50%`, `transform: translateX(-50%)`。 缺點是：元素寬度為單數像素時，在某些瀏覽器下會模糊。 4. 對于`position: absolute`或者`position:fixed`設置`left`和`right`的值相等。缺點是：只能適用于非文檔流元素。 5. 對于`position: absolute`或者`position:fixed`設置`left:50%`。 `margin-left`設置為元素寬度的一半的負數， 或者`transform: translateX(-50%)`。 `margin-left`的缺點是：需要知道元素的具體寬度，不利于兼容大小不一致的屏幕。`transform`的缺點是：元素寬度為單數像素時，在某些瀏覽器下會模糊。另外，同4一樣，只適用于非文檔流 6. 上一層元素的css設置`display:flex`, `justify-content: center`. 缺點是：當前元素的兄弟元素會與當前元素同一行排列。 ## 如何垂直居中 **考察點** 1. 垂直居中的方式 2. 各種垂直居中方式的優缺點 **回答** 1. 如果內容只有一行， 那么可以設置`line-height`的高度和`height`的高度一致。 這樣的缺點是：無法使多行文字垂直居中。 2. 對于`position: absolute`或者`position:fixed`設置`top`和`bottom`的值相等。缺點是：只能適用于非文檔流元素。 3. 對于`position: absolute`或者`position:fixed`設置`top:50%`。 `margin-top`設置為元素高度的一半的負數， 或者`transform: translateY(-50%)`。 `margin-top`的缺點是：需要知道元素的具體高度度，不利于兼容大小不一致的屏幕。`transform`的缺點是：元素高度為單數像素時，在某些瀏覽器下文字會模糊。另外，同2一樣，只適用于非文檔流 4. `position:relative`, `margin-top`設置為元素高度的一半的負數， 或者`transform: translateY(-50%)`。 `margin-top`的缺點是：需要知道元素的具體高度度，不利于兼容大小不一致的屏幕。`transform`的缺點是：元素高度為單數像素時，在某些瀏覽器下文字會模糊。另外，由于`relative`的性質，元素原來位置處會出現空白，無法被其他元素使用，同時又有可能蓋住其他元素。 5. 使用`margin-top: 50%`, `tranform: translateY(-50%)`, 缺點是：元素高度為單數像素時，在某些瀏覽器下文字會模糊。 6. 上一層元素設置`display:flex`, `align-items: center`. 缺點是： 當前元素