【前端】居中问题、内容超出div范围、动态简历

今天做了一个动态简历

https://forkeep.github.io/interaction-resume/

这个过程中有以下几点印象深刻：

 

方法一

当当前元素是相对定位时：

 //相对定位时可采用这个方式来垂直居中
    top: 50%
    transform: translateY(-50%)

可以使之垂直居中

水平同理

 

方法二

当当前元素是绝对定位时：

 margin: auto auto
        top: 0
        bottom: 0
        left: 0
        right: 0

实现水平和垂直居中

 

内容超出div范围，想要水平不扩展，垂直方向出现滚动条：

 overflow:
            y: auto
            x: hidden

这句话的意思是y方向，如果超出范围就会自动显示滚动条，x方向不扩展