## 水平居中有哪些方式 **考察点** 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`. 缺点是： 当前元素