首頁猿問怎樣用CSS3把圖片居中？

怎樣用CSS3把圖片居中？

CSS3

Goraidh 2017-06-29 09:34:05

查看完整描述

5 回答

已采納

陽光暖暖的時(shí)光慢慢的

TA貢獻(xiàn)3條經(jīng)驗(yàn) 獲得超2個(gè)贊

<html>
<head>
????<title>div居中</title>
</head>
<body>
???<img?src="1.jpg"?style="width:100px;height:100px;position:absolute;?top:0;bottom:0;left:0;right:0;margin:auto;">
</body>
</html>

2 反對(duì) 回復(fù) 2017-06-29

qq_哪嬡芣侢秇著_0

TA貢獻(xiàn)4條經(jīng)驗(yàn) 獲得超1個(gè)贊

直接把IMG轉(zhuǎn)成塊元素就行了，比如

img{

????display:block;

????width:300px;

????height:300px;

????margin:auto;

}

1 反對(duì) 回復(fù) 2017-09-22

謝凌

TA貢獻(xiàn)41條經(jīng)驗(yàn) 獲得超14個(gè)贊

margin:0 auto;

1 反對(duì) 回復(fù) 2017-06-29

weibo_正在輸入

TA貢獻(xiàn)2條經(jīng)驗(yàn) 獲得超1個(gè)贊

昨天剛剛給朋友寫的如何居中的代碼,你可以看一下效果

<html>
<head>
	<title>div居中</title>
</head>
<body?style="background:blue;?width:100%;?height:100%">


<div?style="background:red;?width:400px;?height:200px;margin:auto;?">
方式一
1.?設(shè)置寬高?width:400px;?height:400px;<br>
2.?設(shè)置外邊距?margin:0?auto;
</div>


<div?style="background:yellow;width:400px;?height:200px;?position:absolute;?left:45%;?top:45%">
方式二
1.?設(shè)置定位方式為絕對(duì)定位??position:absolute；
2.?設(shè)置該div距離父元素的左邊距和上邊距為?40%，40%??left:45%;?top:45%?;
</div>
</body>
</html>

1 反對(duì) 回復(fù) 2017-06-29