Home > Article > Web Front-end > How to write css div centering code for images

How to write css div centering code for images

藏色散人Original: 2021-01-04 10:22:022931browse

How to write the image css div centering code: first set the display to table-cell; then set the horizontal centering to text-align to center; finally set the vertical centering to vertical-align to middle.

The operating environment of this tutorial: Dell G3 computer, Windows 7 system, HTML5&&CSS3 version.

Recommended: "css video tutorial"

body structure

<body>
<div>
<img src="1.jpg" alt="haha">
</div>
</body>

Method 1:

Set display to table-cell , then set text-align to center for horizontal centering and vertical-align to middle for vertical centering.

<style type="text/css">
*{margin: 0;padding: 0;}
    div{
width:150px;
height: 100px;
display: table-cell;
vertical-align: middle;
text-align: center;
border:1px solid #000;
}
img {
        width: 50px;
  height: 50px;
}
</style>

The result is shown in the figure below:

How to write css div centering code for images

Method 2:

Achieved through position positioning. Set the div to relative positioning, and set the img to absolute positioning, left:50%, top:50%. At this time, the upper left corner of the image is located in the center of the div. If the center of the image is located in the center of the div, you need to position the image Moves half the image's height up and half its width to the left.

<style type="text/css">
*{margin: 0;padding:0;}
div{
width:150px;
height: 100px;
position: relative;
border:1px solid #000;
}
img {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
left: 50%;
  margin-top: -25px; /* 高度的一半 */
  margin-left: -25px; /* 宽度的一半 */
}
</style>

The result is as shown below:

How to write css div centering code for images

Method 3: Can be used when the true width and height of the image or element is unclear

It is still achieved through position positioning. Set the div to relative positioning, and set the img to absolute positioning, left:50%, top:50%. At this time, the upper left corner of the image is located in the center of the div. If the center of the image is located in the center of the div, you need to position the image Move half of the image height upward and half of the image width to the left. If you don’t know the width and height of the element, you can use transform: translate(-50%,-50%);

<style type="text/css">
    *{margin: 0;padding:0;}
    div{
        width:150px;
        height: 100px;
        position: relative;
        border:1px solid #000;
    }
    img {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
</style>

Method 4:

<style type="text/css">
    *{margin: 0;padding:0;}
    div{
        width:150px;
        height: 100px;
        position: relative;
        border:1px solid #000;
    }
    img {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
</style>

Method 5: Flexible layout flex

<style type="text/css">
    *{margin: 0;padding:0;}
    div{
        width:150px;
        height: 100px;
        border:1px solid #000;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    img {
        width: 50px;
        height: 50px;
    }
</style>

The effect is the same, I hope it can help everyone!

The above is the detailed content of How to write css div centering code for images. For more information, please follow other related articles on the PHP Chinese website!

html5 css css3 display position transform flex table

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use link to introduce css in htmlNext article：How to use link to introduce css in html

See more

How to write css div centering code for images

Related articles