What are the ways to center images in divs using css?

This article introduces four methods for centering pictures in divs. I hope it will be helpful to you.

Method 1:

(Recommended tutorial: css video tutorial)

html:

  <div class="title">
            <div class="flag"></div>
            <div class="content">
                <img src="img_p1_title.png">
            </div>
        </div>

css

.title {
   width: 100%;
    font-size: 0;
    height: 10%;
}
.title .content img {
    width: 35%;
}
/*--主要的--*/
.content{
    display: inline-block;
    vertical-align: middle;
  }
.flag{
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    width: 0;
  }

Method two:

html

  <div class="title">
  <img src="img_p1_title.png">

css

.title {
  display: flex;
  justify-content: center;
  align-items: center;
}

.title img {
  width: 35%;
}//该方法有些旧系统不支持

Method three:

html

 <div class="title">
<span>第三种方法</span>

css

.title {
   height: 15%;
   font-size: 18px;
   position: relative;
}

.title span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Method 4:

html

<div class="title">
<span>第四种方法</span>

css

 .title {
    width: 200px;
    height: 200px;
    vertical-align: middle;
    display: table-cell;
    text-align: center;
}

Related recommendations: CSStutorial

The above is the detailed content of What are the ways to center images in divs using css?. For more information, please follow other related articles on the PHP Chinese website!