CSS 将图像垂直和水平居中放置在容器中

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS 将图像垂直和水平居中放置在容器中相关的知识，希望对你有一定的参考价值。

The markup:

<div class="wraptocenter"><span></span><img src="..." alt="..."></div>

The CSS:

<style type="text/css">
.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: ...;
    height: ...;
}
.wraptocenter * {
    vertical-align: middle;
}
/*\*//*/
.wraptocenter {
    display: block;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
/**/
</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
    display: inline-block;
    height: 100%;
}
</style><![endif]-->

以上是关于CSS 将图像垂直和水平居中放置在容器中的主要内容，如果未能解决你的问题，请参考以下文章

当宽度未知时，将图像水平居中并将其垂直放置在 div 内的底部

如果您不知道图像的大小，请在 Div 中垂直和水平居中图像？

使用 CSS 将图像垂直和水平居中

在情节提要中将视图水平居中并垂直放置在底部

如何将图像居中和自动缩放？

仅使用css在div中垂直居中图像[重复]