CSS學習記錄

此博客用於記錄經常使用但又不太熟悉的 CSS 相關知識，會持續更新。

元素水平居中

• 塊級元素

margin: 0 auto 0 auto;

• 行內元素

// 父元素：
    text-align: center;

元素垂直居中

• 塊級元素

方法1：
    // 父元素：
    position: relative;
    // 子元素：
    position: abosulte;
    top: 0
    left: 0
    right: 0
    bottom: 0
    margin: auto
方法2：
    // 父元素：
    position: relative;
    // 子元素：
    position: absolute;
    top: 50%
    left: 50%
    margin-left: -(@width / 2);
    margin-top: -(@height / 2);
方法3：
    // 父元素：
    position: relative;
    // 子元素：
    position: absolute;
    top: 50%
    left: 50%
    transform: transition(-50%, -50%);
方法4：
    // 父元素：
    display: flex;
    justify-content: center;
    align-items: center;

• 行內元素 ``` 單行文本： // 父元素： line-height: @height; 多行文本： // 父元素： line-height: @height; // 子元素： display: inline-block; line-height: 20px; //reset vertical-align: middle;