学习CSS布局-垂直水平居中

学习大纲

• 水平居中
• 垂直水平居中

水平居中

<div class="parent">
    <p class="child">水平居中</p>
</div>

方法一

• 优点:兼容性好，甚至可以兼容ie6、ie7
• 缺点:child里的文字也会水平居中，可以在.child添加text-align:left;还原

.parent {
    text-align: center;
}

.child {
    display: inline-block;
}

方法二

• 优点：只设置了child，ie8以上都支持
• 缺点：ie6、ie7不支持将div换成table

.parent {
}

.child {
    display: table;
    margin: 0 auto;
}

方法三

• 优点:居中元素不会对其他的产生影响
• 缺点:transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀

.parent {
    position: relative;
}

.child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

方法四

• 优点: 简单快捷
• 缺点: 低版本浏览器(ie6 ie7 ie8)不支持

.parent {
    display: flex;
}

.child {
    margin: 0 auto;
}

方法五

• 优点:简单快，设置parent即可
• 缺点:低版本浏览器(ie6 ie7 ie8)不支持

.parent {
    display: flex;
    justify-content: center;
}

.child {
}

方法六

• 使用grid网格布局

.parent {
    /*核心代码*/
    display: grid;
}

.child {
    justify-self: center;
}

水平垂直居中

<div class="parent">
    <p class="child">child</p>
</div>

方法一

• absolute + 负margin值
• 父元素设置相对定位，子元素设置绝对定位，margin值设置为负数
• 注意：子元素需要定宽高

 .parent {
    /*核心代码*/
    position: relative;
    
    height: 200px;
    width: 200px;
    border: 1px solid #f00;
}

.child {
    /*核心代码*/
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;

    width: 100px;
    height: 100px;
    background: #f00;
}

方法二：

• absolute + margin auto
• 父元素设置相对定位，子元素设置绝对定位，margin值设置auto，四个方向设置为0
• 注意：子元素需要定宽高

.parent {
    /*核心代码*/
    position: relative;
    
    height: 200px;
    width: 200px;
    border: 1px solid #f00;
}

.child {
    /*核心代码*/
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    
    width: 100px;
    height: 100px;
    background: #f00;
}

方法三：

• absolute + calc
• 父元素设置为相对定位，父元素设置绝对定位，使用ralc
• 注意：子元素需要定宽高

  .parent {
    /*核心代码*/
    position: relative;

    height: 200px;
    width: 200px;
    border: 1px solid #f00;
}

.child {
    /*核心代码*/
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);

    width: 100px;
    height: 100px;
    background: #f00;
}

方法四

• absolute + transform
• 父元素设置为相对定位，父元素设置绝对定位，使用transform
• 注意：子元素不需要定宽高

 .parent {
    /*核心代码*/
    position: relative;

    height: 200px;
    width: 200px;
    border: 1px solid #f00;
}

.child {
    /*核心代码*/
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    background: #f00;
}

方法五

• writing-mode
• 使用writing-mode垂直水平居中
• 子元素（.item）不需要定宽高

<div class="parent">
    <ul class="child"><li class="item">item</li>
    </ul></div>

/* css */
.parent {
    /*核心代码*/
    writing-mode: vertical-lr;
    text-align: center;

    height: 200px;
    width: 200px;
    border: 1px solid #f00;
}

.child {
    /*核心代码*/
    writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    width: 100%;
}

.item {
    /*核心代码*/
    display: inline-block;
    margin: auto;
    text-align: left;
    background: #f00;
}

方法六

• line-height
• 父元素定好宽高，使用line-height水平对齐
• 子元素可以不设置宽高

.parent {
    /*核心代码*/
    width: 200px;
    line-height: 200px;
    text-align: center;
    
    border: 1px solid #f00;
}

.child {
}

方法七

• table
• 父元素设置table-cell
• 子元素可以不用设置宽高

.parent {
    /*核心代码*/
    display: table-cell;
    text-align: center;
    vertical-align: middle;

    width: 200px;
    height: 200px;
    border: 1px solid #f00;
}

.child {
    /*核心代码*/
    display: inline-block;

    background: #f00;
}

方法八

• 使用flex
• 子元素可以不用设置宽高

.parent {
    /*核心代码*/
    display: flex;
    justify-content: center;
    align-items: center;

    width: 200px;
    height: 200px;
    border: 1px solid #f00;
}

.child {
    background: #f00;
}

方法九

• 使用grid网格布局
• 子元素可以不用设置宽高

.parent {
    /*核心代码*/
    display: grid;

    width: 200px;
    height: 200px;
    border: 1px solid #f00;
}

.child {
    /*核心代码*/
    align-self: center;
    justify-self: center;
    
    background: #f00;
}