css文字居中、图片居中、div居中解决方案

一、文字居中

　　若文字只有一行

<!--html代码-->
<div class="box">
    <p class="text">文本只有一行</p>
</div>
<!--css代码-->
.box {
    width: 200px;
    height: 200px;
    background-color: red;
}
.text {
    line-height: 200px;
    text-align: center;
}

　　若文字行数未知

<!--html代码-->
<div class="box">
    <div class="box_inner">
        <p>文本行数未知</p>
    </div>
</div>
<!--css代码-->
.box {
    width: 200px;
    height: 200px;
    background-color: red;
    display: table;
}
.box_inner {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

二、图片居中

　　表格法，跟上面文本行数未知居中一样，只是把<p>标签换为<img>标签

　　背景法

<!--html代码-->
<div class="box"></div>
<!--css代码-->
.box {
    width: 200px;
    height: 200px;
    background: url(...) no-repeat center center;
}

三、div居中

　　若div只是水平方向居中，可以设置margin:0 auto实现

　　div水平垂直居中（方法一）

<!--html代码-->
<div class="box">
    <div class="box_inner"></div>
</div>
<!--css代码-->
.box {
    width: 200px;
    height: 200px;
    background-color: red;
    position: relative;
}
.box_inner {
    width: 50px;
    height: 50px;
    background-color: green;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: -25px;
}

　　div水平垂直居中（方法二）

<!--html代码-->
<div class="box">
    <div class="box_inner"></div>
</div>
<!--css代码-->
.box {
    width: 200px;
    height: 200px;
    background-color: red;
    position: relative;
}
.box_inner {
    width: 50px;
    height: 50px;
    background-color: green;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}

　　div水平垂直居中（方法三）

<!--html代码-->
<div class="box">
    <div class="box_inner"></div>
</div>
<!--css代码-->
.box {
    width: 200px;
    height: 200px;
    background-color: red;
    position: relative;
}
.box_inner {
    width: 50px;
    height: 50px;
    background-color: green;
    position: absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}

　　以上三种方法思路都是通过设置div绝对定位，先居中左上角，再补齐。

　　div水平垂直居中（方法四）

<!--html-->
<div class="box">
    <div></div>
</div>
<!--css-->
.box {
    justify-content:center;//子元素水平居中
    align-items:center;//子元素垂直居中
    display:flex;
}