CSS图像剧中非常常见,下面将为大家介绍一些常用的实现方式。
img{ display:block; /* 将图片转化为块级元素 */ margin:auto; /* 设置边距为自动,使其水平居中 */ }
上述代码适用于只需要水平居中的情况,如果需要垂直居中,可以使用以下代码。
.container{ position:relative; /* 定位容器 */ } img{ position:absolute; /* 定位图片 */ top:50%; /* 顶部距离为50% */ left:50%; /* 左侧距离为50% */ transform:translate(-50%, -50%); /* 偏移值为图片宽高的50% */ }
如果需要兼容IE9及以下版本,可以使用以下代码。
.container{ display:table-cell; text-align:center; vertical-align:middle; } img{ display:inline-block; }
以上是CSS实现图片剧中的常规方法,可以根据自己的需要选择方法。