Html Div图像未垂直和水平居中？_Html_Image_Centering

Html Div图像未垂直和水平居中？

html image

Html Div图像未垂直和水平居中？,html,image,centering,Html,Image,Centering,无论我做什么尝试，我的图像都不会以顶部的标题为中心。如果有人能提供一个代码更正我将不胜感激。提前谢谢 img{ 位置：绝对位置；最高：50%；左：50%；宽度：675px；高度：418px；利润上限：-250px； /*半高*/ 左边距：-250px； /*一半宽度*/ } 身体{ 背景色：黑色； } h1{ 颜色：白色；文本对齐：居中； } p{ 颜色：白色；字体系列：verdana；字体大小：20px； } 文本尝试将左侧：50%更改为左侧：43%。这会让你达到你想去的

无论我做什么尝试，我的图像都不会以顶部的标题为中心。如果有人能提供一个代码更正我将不胜感激。提前谢谢

img{
位置：绝对位置；
最高：50%；
左：50%；
宽度：675px；
高度：418px；
利润上限：-250px；
/*半高*/
左边距：-250px；
/*一半宽度*/
}
身体{
背景色：黑色；
}
h1{
颜色：白色；
文本对齐：居中；
}
p{
颜色：白色；
字体系列：verdana；
字体大小：20px；
}

文本

尝试将

左侧：50%

更改为

左侧：43%

。这会让你达到你想去的地方

试试看：

<!DOCTYPE html>
<html>
<head>
<title>HTML Reference</title>
<style>
img {
   display: block;
   margin: 0 auto;
}

body {
    background-color: black;
}

h1 {
    color: white;
    text-align: center;
}

p {
    color : white;
    font-family: verdana;
    font-size: 20px;
}
</style>
</head>
<body>

<h1>Text</h1>
<div class="img">
  <img src="rsz_damon600.png">
</div>

</body>
</html>


HTML参考
img{
显示：块；
保证金：0自动；
}
身体{
背景色：黑色；
}
h1{
颜色：白色；
文本对齐：居中；
}
p{
颜色：白色；
字体系列：verdana；
字体大小：20px；
}
文本

使用css技巧

转换：翻译（-50%，-50%）

：

img{
位置：绝对位置；
最高：50%；
左：50%；
宽度：675px；
高度：418px；
转换：翻译（-50%，-50%）；
}
身体{
背景色：黑色；
}
h1{
颜色：白色；
文本对齐：居中；
}
p{
颜色：白色；
字体系列：verdana；
字体大小：20px；
}


文本

您应该将页边距顶部和左侧设置为宽度和高度的一半

或者，如果不知道元素的大小，可以使用

转换：转换（-50%，-50%）
使其垂直和水平居中

img { position: absolute; top: 50%; left: 50%; /* width: 675px; height: 418px; */ transform: translate(-50%, -50%); }
另一种方法：

img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }

这是一个
你可以这样做。将图像放置在div元素中。然后将div的边距设置为auto.：）

Nevermind可能重复，我发现了问题。我应该把页边的顶部和左侧改为宽度和高度的一半。谢谢你。
<div name="my_div"style="margin:auto;"> <img src="" id="" /> </div>