CSS怎么让图片居中

html-css017

CSS怎么让图片居中,第1张

1、首先先在页面里加载一张图片,代码和效果如下图所示:

2、然后设置给图片起一个class名,方便一会儿的操作。

3、然后给图片设置css样式,因为方便的原因就直接在html页面写css样式了。

4、经常使用“margin: 0 auto”来实现水平居中,而一直认为“margin: auto”是不能实现垂直居中,但是实际上,仅需要添加一些限制便能实现效果,就是通过定位:

position: absolute

top: 0

left: 0

bottom: 0

right: 0

设置定位让上下左右都为0,然后通过margin:0 auto,来让元素实现上下左右都居中。

5、设置完CSS样式之后,通过浏览查看代码的效果就可以,可以看到图片已经实现了。

6、最后给大家附上全部的代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>使用CSS让图片水平垂直居中</title>

</head>

<body>

<img class="pic" src="img/timg.jpg" alt="" />

</body>

<style type="text/css">

.pic{

margin: auto

position: absolute

top: 0

left: 0

bottom: 0

right: 0

}

</style>

</html>

1,可以用弹性容器来实现居中。

2,用<p align="centger"><img src="###"></p>来实现居中。

3,容器和图片都设置宽度高度,已经知道宽度高度情况下,用margin-top,margin-left等方式来设置居中。

3,用相对定位方式实现居中。margin:0 auto

4,对容器设置text-align:center方式来实现居中。

最简单的方法:给图片单独套个div,给div做margin设置就好了,设置用百分比,具体如下

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>图片居正中间__郭凯旗</title>

<style>

html{height:100% width:100%}

body{height:100% width:100%}

.d1{width:300px 

    height:200px 

background:red

position:fixed

top:50%

margin-top:-100px

    left:50%

margin-left:-150px

}

.d1 img{width:100%height:100%}

</style>

</head>

<body>

      <div class="d1">

           <img src="1.jpg"/>

      </div>

</body>

</html>

<!--至于大小自己调节到合适的就好了-->

效果图如下: