方法一：
思路：利用text-align属性将水平居中，然后设置padding-top的值使其垂直居中。
结构如下：
<div>
<img src="images/ttgif" width="150" height="100" />
</div>
CSS样式如下：
div {width:300px; height:150px; background-color:#CCC; border:#000 1px solid; text-align:center; padding-top:50px;}
运行结果如下：
释义：
的尺寸为150x100px，DIV的大小为300x200px；
background-color:#CCC; border:#000 1px solid;为DIV加个边框和背景色，便于观察效果。
text-align:center,实现的水平居中；padding-top:50px，50px这个数值是经过计算得到的，padding-top的值具体算法如下：（DIV的高度 – 的高度）/2，但这里要注意，根据盒模型原理，我们还要将DIV原来的高度200减去padding-top的值，这样显示的才是正确的，否则DIV会变高。
方法二：
思路：只用padding属性，通过计算求得居中
结构代码同上；
CSS样式如下：
div {width:225px; height:150px; background-color:#eee; border:#000 1px solid; padding-top:50px; padding-left:75px;}
备注：这里DIV的宽高计算都遵循盒模型原理，计算方法同上。
方法三：
思路：
利用的margin属性将水平居中，利用DIV的padding属性将垂直居中。
结构代码同上；
CSS代码如下：
div {width:300px; height:150px; background-color:#eee; padding-top:50px; border:#000 1px solid;}
img {display:block; margin:0 auto;}
备注：
Img是内联元素，要设置其margin属性使其居中，就要将其转换为块元素display:block;然后利用margin:0 auto;实现的水平居中；（有的设计师为再加个div标签，然后通过div标签的margin实现居中
body结构<body>
<div>
<img src="1jpg" alt="haha">
</div>
</body
方法一：
将display设置成table-cell，然后水平居中设置text-align为center，垂直居中设置vertical-align为middle。
<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>
方法二：
通过position定位来实现。将div设置成相对定位relative，将img设置成绝对定位absolute，left:50%，top:50%，此时的左上角位于div的中心，要是的中心位于div的中心，就需要将向上移动高度的一半，并向左移动宽度的一半。
<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>两种方式可以实现你说的效果：
1，相对简单，直接给img 的父级标签设置 text-align: center; 属性，因为是内联块元素，即 inline-block 元素，这类元素是可以用 text-align 属性来控制对齐方式的。
2，相对复杂，而且只能是现代浏览器才行，在老一些的IE浏览器中不支持。就是使用 flex 布局，样式也是加在父级元素上的，设置 display: flex; justify-content: center;
html中使居中的代码是：<img src="" alt="" align="center" />
1、首先我们需要打开电脑，找到DW软件的快捷键，双击打开之后，新建一个html页面。
2、然后我们会进入到DW的HTML页面的编辑页面，我们需要将新建的html页面进行一个保存。
3、将网页保存好之后，我们需要重新回到DW的编辑页面。
4、然后我们需要在body部分新建一个div标签，并在其中插入一张img。并给div添加简单的css样式。
5、然后我们在浏览器中查看效果，可以发现是默认左对齐的，并没有在div的正中央显示。
6、此时为添加居中属性也是没有用的，我们需要将套在一个p或者span标签中，给标签添加一个text-align:center属性。
在使用HTML绘制页面的时候，适当的图文编排可以使内容更具有吸引力，下面就介绍下使HTML中居中的简单办法
01打开记事本或者其他的代码编辑器，新建一个HTML文件，如下图
02使用浏览器打开这个HTML文件，可以看到如下图所示的效果，在整个页面的左方
03使居中，可以通过HTML中的align属性来控制，在的div中加入align=“center”
04再次在浏览器中打开这个页面文件，效果如下，已经居中显示
05我们还可以通过样式文件来实现的居中显示，这里我们以class选择器为例，为层加入class="img_center"，然后在style标签中定义样式，如下图
06在浏览器中打开这个文件，效果如下，发现也可以居中显示
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）