div中如何让文本元素、img元素水平居中且垂直居中

一、文本元素在div中的水平居中且垂直居中方法

html代码

<div id="box">
    <p>文本元素</p>
</div>

css代码：给文本元素的父级设置——text-align：center; 并设置父级的行高等于父级的高度

#box{
    width: 200px;
    height: 200px;
    background: skyblue;
    text-align: center;
    line-height: 200px;
}

结果如下：

 

二、img元素在div中的水平居中且垂直居中方法

方式一：把div设置为弹性盒子，img的margin设置为auto；

html代码：

<div id="box">
    <img src="img/1.jpg" alt="" width="150" height="150" />
</div>

css代码：

#box{
    width: 200px;
     height: 200px;
     background: orange;
     display: flex;
}
img{
     margin: auto;
}

 

结果如下：

 

方式二：把div的display设置du成table-cell，text-align为center，垂直居中设置vertical-align为middle。

html代码：

<div id="box">
　　<img src="img/1.jpg" alt="" width="150" height="150" />
</div>

css代码：

#box{
    width: 200px;
    height: 200px;
    background: aquamarine;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

 

结果如下：

 

方式三：

①img有固定的宽高，通过定位和设置margin的方法；

html代码：

<div id="box">
　　<img src="img/1.jpg" alt="" width="150" height="150" />
</div>

css代码：

#box{
    width: 200px;
    height: 200px;
    background: salmon;
    position: relative;
}
img{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -75px;
    margin-top: -75px;
}

 

结果如下：

 

②img没有固定的宽高，通过定位和平移；

html代码：

<div id="box">
　　<img src="img/1.jpg" alt="" />
</div>

 css代码：

#box{
    width: 300px;
    height: 300px;
    background: cornflowerblue;
    position: relative;
            }
img{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

 

结果如下：