CSS使元素居中的几种方式

1、使行内元素

水平居中

text-align : center

垂直居中

line-height : 容器的高度，如果有 n 行文本，则使用 height / n

2、块元素水平居中

margin : 0 auto; 注意它只对块元素有效，行内块虽有宽高，但也需要转为块元素才能生效

３、垂直居中

1、

vertical-align : middle; 需要注意的是，它只对于inline 和 inline-block 以及设置了table-cell （例如td）的元素。

2、

、父元素不设置高度，利用padding-top == padding-bottom

4、水平和垂直都居中 (即行内块元素水平垂直居中的方式)

• 1、使用定位
• 2、使用 display : table
• 3、使用弹性布局： display : flex
• 4、使用transform : translate() 和定位实现

1、使用定位实现水平垂直居中

html代码

<div class="outer">
    <div class="inner"></div>
</div>

CSS代码

.outer{
        width: 600px;
        height: 600px;
        background: #f00;
        margin: 0 auto;
        position: relative;
    }
    .inner{
        width: 200px;
        height: 200px;
        background: #00f;
        position: absolute;
        left: 50%;
        margin-top: -100px;    /*自身高度的一半*/
        margin-left: -100px;   /* 自身宽度的一半*/
        top: 50%;
    }

2、使用 display : table属性实现水平垂直居中

html代码

<div class="outer">
    <div class="inner">
    </div>
</div>

CSS代码

.outer{
    width: 600px;
    height: 600px;
    background: #f00;
    /*将父元素设置 display : table-cell; 并搭配 vertical-align:middle;*/
    display: table-cell;
    vertical-align: middle;
}
.inner{
    width: 200px;
    height: 200px;
    background: #00f;   
    margin: 0 auto;
}

3、使用弹性布局实现

html代码

<div class="outer">
    <div class="inner">
    </div>
</div>

CSS代码

.outer{
    width: 600px;
    height: 600px;
    background: #f00;
    display: flex;

    /*设置主轴方向（默认为水平）居中*/
    justify-content:center;

    /*设置交叉轴方向（与主轴垂直）居中*/
    align-items: center;
}
.inner{
    width: 200px;
    height: 200px;
    background: #00f;   
    
}

4、使用transform 变换和定位实现居中

html代码

<div class="outer">
    <div class="inner">
    </div>
</div>

CSS代码

.outer{
    width: 600px;
    height: 600px;
    background: #f00;
    position: relative;
}
.inner{
    width: 200px;
    height: 200px;
    background: #00f;   
    position: absolute;
    left: 50%;
    top:50%;

    /*这里需要注意的是，translate移动的是自身宽高的 百分比*/
    transform: translate(-50%,-50%);
}