首页 >
css大图居中 |css 划过显示
今天偶来和大家分享一下如何用CSS让大图居中显示。在Web开发中，大图往往是网页中不可或缺的一部分，但是如何让它居中显示呢？下面让大家一起来看看。
首先，大家要明确一下居中显示的方式。大图的居中显示，可以有以下3种方式：
1.页面居中显示
2.容器居中显示
3.响应式居中显示
对于每种方式，大家都有不同的CSS实现方法。
一、页面居中显示
对于页面居中显示，大家可以将大图放在标签中，并设置CSS代码如下：
pre{
text-align: center;
}
img{
display: block;
margin: 0 auto;
}
通过上述代码，大家为图片设置了居中显示的样式，将图片的显示方式设置为块级元素，而且将左右外边距都设置为auto，这样就能保证图片水平居中。
二、容器居中显示
对于容器居中显示，大家可以将大图放在一个容器中，并设置容器的CSS样式如下：
pre{
text-align: center;
}
.container{
display: flex;
justify-content: center;
align-items: center;
}
img{
max-width: 100%;
max-height: 100%;
}
通过上述代码，大家为容器设置了display:flex属性，这样就可以将容器中的元素水平排列，然后通过justify-content: center属性将元素水平居中，再通过align-items:center属性将元素垂直居中。
三、响应式居中显示
对于响应式居中显示，大家需要适配不同尺寸的设备，可以使用CSS媒体查询来实现。
pre{
text-align: center;
}
.container{
position: relative;
}
img{
max-width: 100%;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px){
img{
position: static;
transform: none;
}
}
通过上述代码，大家为图片设置了position:absolute属性，将图片从文档流中取出，并用top:50%和left:50%将图片位置移到容器的中央，最后利用transform:translate(-50%, -50%)实现居中显示。
在media query中，大家对小屏幕设备设置了图片的位置变为static，让图片回到文档流中，并取消transform属性，实现响应式居中显示。
总结
通过上述方法，大家就可以实现大图的居中显示。不同的方式适用于不同的场景，选择合适的方法可以让大家的网页实现更好的用户体验。