图像中心垂直和水平对齐

2018-06-14 14:05:13

这个问题在这里已经有了答案：

如何水平和垂直居中元素？ 13个答案

有一些好的方法可以水平和垂直居中放置一个元素，这只是归结于情况和偏好。

使用以下标记：

<div><img src="a.png" width="100" height="100"></div>

行高

div { width:300px; height:300px; line-height:300px; text-align:center; }
div img { vertical-align:middle; }

良好的快速修复而不会弄乱太多的position但如果实际上文本以这种方式居中，可能会产生问题。

div { width:300px; height:300px; text-align:center; display:table-cell; vertical-align:middle; }

像旧式桌面一样工作并且非常灵活，但只在现代浏览器中受到支持。

div { width:300px; height:300px; position:relative; }
div img { top:-50px; left:-50px; position:absolute; margin:50% 0 0 50%; }

top和left偏移量应设置为元件相应尺寸的一半。如果包含元素需要灵活，但需要绝对值才能正常工作，则工作良好。

为什么不去除img标签，然后将图像设置为background并将其居中：

（做内联，但通过外部的CSS文件是最好的方式）

<div style="background: url('7-612x612-2.png') no-repeat center center transparent;">&nbsp;</div>

链接地址: http://www.djcxy.com/p/41489.html