怎么使用CSS让图片水平垂直都居中？

html-css014

怎么使用CSS让图片水平垂直都居中？,第1张

CSS是层叠样式表。下面，我们来看看怎么使用CSS让图片水平垂直都居中吧。

新建一张文档

在桌面新建一张文本文档，改名为1.txt，如下图所示：

基础代码

然后打开文本文档，编写基础代码，再把桌面上的老虎图片引入进去，如下图所示：

后缀名

然后把文本文档后缀名改为.html，如下图所示：

运行网页

然后在浏览器中运行网页，现在图片有了，只是还没有居中，图片居住代码要用CSS写，如下图所示：

CSS代码

然后写上CSS代码，如下图所示：

垂直水平居中

可以看到图片已经垂直和水平居中，如下图所示：

总代码

<!DOCTYPE html>

<head>

<title>html</title>

<style type="text/css">

.picTiger{

margin: auto

position: absolute

top: 0

left: 0

bottom: 0

right: 0

}

</style>

</head>

<body>

<img class="picTiger" src="C:/Users/Administrator/Desktop/1.jpg">

</body>

<html>

这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。

<div id="wrapper">

<div id="cell">

<div class="content">

Content goes here</div>

</div>

</div>

#wrapper {display:table}

#cell {display:table-cellvertical-align:middle}

该文章转摘自-网页制作大宝库(www.dabaoku.com) - 原文链接：http://www.dabaoku.com/jiaocheng/wangye/css/20091002548.shtml

根据不同情况使用不同方法，有具体需求你在追问，我看到就回答，给你说个通用的，但是是在低级版本浏览器有兼容问题的方法，设置position:absolutetop:50%left:50transform:translate(-50%,-50%)

另一种方法，display:table-cell 具体自己百度，但是这个也有局限性，图片字体跟一些行内样式，在父元素确定高度的情况可以直接在父元素添加line-height:xxpx(xx为父元素高度)text-align:centervertical-align:middle