dw中CSS把图片居中的方法步骤
一、行高（line-height）法如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如： p { height:30px; line-height:30px; width:100px; overfLOW:hidden; }这段代码可以达到效果。
二、内边距（padding）法另一种方法和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用padding将内容垂直居中，比如：p { padding:30px; }
在Web中,有几种方式可以使图片居中:
这是最简单的居中方式:
设置img为块级元素,并给它一个宽度,再用margin: auto实现水平居中。这种方式图片会占据一定宽度,周围有margin空白区域。
将img设为绝对定位,left和top各为50%,再使用transform的translate方法向相反方向移动自身宽高的一半,即实现居中。这种方式图片不会影响页面布局。
将img宽高设置为视口宽高的10%,这样就可以自适应实现居中,非常简单。这种方式同样不影响页面布局。
如果img的父元素为Flex容器,可以这样设置:
这会让Flex容器中的所有元素都水平垂直居中,包括img。这是实现居中最简单也最现代的方式。
1、通过margin: 0 auto; text-align: center实现CSS水平居中。
这种方法是实现CSS水平居中最最常用的，我在前端开发中大概有60%的CSS水平居中就是通过“margin: 0 auto; text-align: center”实现的。
2、通过display:flex实现CSS水平居中。
随着越来越多兼容flexbox，所以通过“display:flex”实现CSS水平居中的方案也越来越受青睐。
通过display:flex实现CSS水平居中的原理是父元素display:flex;flex-direction:column;而子元素align-self:center;
这个跟CSS垂直居中的原理是一样的，只是在flex-direction上有所差别，一个是row(默认值)，另外一个是column。
3、通过display:table-cell和margin-left实现CSS水平居中。
对于父元素和子元素的宽度都确定的情况，适合通过display:table-cell和margin-left实现CSS水平居中。
使用时，父元素display:table-cell，子元素给剩余宽度一半的margin-left。