Home >Web Front-end >CSS Tutorial >How to center the image in the css box
How to center the image in the css box
- 青灯夜游Original
- 2021-02-23 15:59:2716285browse
Centering method: 1. Set relative positioning for the box and absolute positioning for the picture; then adjust the position of the picture. 2. Set the img image element as a block-level element; then use table-cell and "vertical-align:middle;" to center it. 3. Use flexbox layout to center.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
css to center the image in the div box
##First method: Use the position attribute of css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.div1 {
width: 200px;
height: 200px;
border: 1px solid #000000;
position: relative;
}
img {
width: 100px;
height: 100px;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="div1">
<img src="img/1.jpg" / alt="How to center the image in the css box" >
</div>
</body>
</html>Rendering:
Second: Use the new attributes of css3 table-cell, vertical-align:middle;
nbsp;html>
<meta>
<style>
.div {
width: 200px;
height: 200px;
border: 1px solid #000000;
display: table-cell;
vertical-align: middle;
}
img {
width: 100px;
height: 100px;
display: block;
margin: auto;
}
</style>
<div>
<img alt="How to center the image in the css box" >
</div>
Effect:
CSS video tutorial]
Third type: Use Flexbox layout
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.div {
width: 200px;
height: 200px;
border: 1px solid #000000;
display: flex;
/*!*flex-direction: column;*!可写可不写*/
justify-content: center;
align-items: center;
}
img {
width: 100px;
height: 100px;
display: block;
margin: auto;
}
</style>
</head>
<body>
<div class="div">
<img src="img/1.jpg" / alt="How to center the image in the css box" >
</div>
</body>
</html>Effect:
The fourth way: using the transform attribute (disadvantage: need to support Html5)
nbsp;html>
<meta>
<style>
.div {
width: 200px;
height: 200px;
border: 1px solid #000000;
position: relative;
}
img {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
<div>
<img alt="How to center the image in the css box" >
</div>
Rendering:
Programming Video! !
The above is the detailed content of How to center the image in the css box. For more information, please follow other related articles on the PHP Chinese website!