css 图片水平垂直居中

xiong12345677_

于 2020-01-14 13:04:27 发布

阅读量478

点赞数 1

分类专栏： JaveScript 文章标签： css

本文链接：https://blog.youkuaiyun.com/xiongqian_/article/details/103971288

版权

JaveScript 专栏收录该内容

4 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
img {
    
  max-width: 20%;
	display: table;
   
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}
	
	h2{
        text-align:center;
    }
</style>
</head>
<body>

<h2>图片居中对齐</h2>
<p>要让图片居中对齐, 可以使用 margin: auto; max-width可为100%</p>

<img src="//static.runoob.com/images/mix/paris.jpg" alt="Paris" style="width:80%">

</body>
</html>

在这里插入图片描述