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%);

}

结果如下：

巴特西

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

最新文章

热门文章