阿里前端——电话面试题整理

一.元素居中

我们需要让元素居中显示：

1. 一段文本的水平居中 

text-align: center;

2. 一张图片的水平居中

父级：text-align: center;

3. 一个块级元素的水平居中

块级元素水平居中，使用 margin-right: auto; margin-left: auto; 

4. 单行文本的竖直居中

单行文本的垂直居中，让 line-height 和 height 相等。

5. 不确定高度的一段文本竖直居中

不确定高度的一段文本竖直居中，这里不适用高度，使用 padding-top: ...; padding-bottom: ...; padding-top 和 padding-bottom 值相同.

6. 确定高度的块级元素竖直居中等等

确定高度的块级元素竖直居中，使用 position: absolute; top: 50%; margin-top: ...;(margin-top的值为自身高度的值的一半的负值); 

7. 绝对定位实现水平垂直居中，使用 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; 

 8.css3伸缩布局实现元素水平垂直居中，通过使用 display:flex;  align-items: center;  justify-content: center;

justify-content: center; /* 让子元素水平居中 */
 align-items: center; /* 让子元素垂直居中 */

https://www.cnblogs.co