关于CSS居中显示的总结

不记得是什么时候，感觉好久以前看过一篇文章，讲的是网页优化的一些小技巧，记得好像有这样一句话：一个优秀的网页要尽量避免使用浮动（float）和定高定宽，定高定宽（px）不利于网页的自适应排版，这很容易理解，浮动是个好东西，但有时候处理不好确实是个大麻烦，额，好像跑题了，不多说了。

首先，来说一说图片的垂直居中(以多张图片并排显示，各自居中为例)。

比较巧妙的一个办法是用一个透明的PNG图片作为IMG标签的SRC，将PNG图片拉伸到外层容器的大小，然后把想要居中显示的图片作为IMG标签的背景图片，加上background-position:center;就可以实现图片的居中显示了。

<img src="transparent.png" style="background:url(target.jpg) center no-repeat;width:100vw;height:100vh;" />

另一种办法是使用display:table-cell;和text-align:center;

<div style="width:100vw;height:500px;display:table-cell;vertical-align:middle;text-align:center;font-size:0px;"><img src="a.jpg" />
</div>

注意：这里必须要加上font-size:0px;这个属性，不然会在chrome下多出4px高度，IE10下多出3.91px（其他IE版本未测试）。

还一种方法是使用display:inline-block;和text-align:center;和上一中方法类似

<div style="width:100vw;line-height:500px;display:inline-block;text-align:center;font-size:0px;">
<img src="a.jpg" style="vertical-align: middle;" />
</div>

当然，容器的高度也不一定非要用line-height撑起，也可以使用伪类:after来解决

<div id="a" style="width:100vw;height:500px;display:inline-block;text-align:center;font-size:0px;"><img src="a.jpg" style="vertical-align: middle;" />
</div>

#a:after{content:"";height:100%;vertical-align: middle;display:inline-block;}

接下来，我们再来看看元素居中

1.使用CSS3显示居中

想要居中的div层CSS样式为position:relative;top:50%;transform:translateY(50%);

不过缺点就是支持IE9+;

2.用绝对定位来显示居中的效果（absolute）

<div style="margin:0px;position:relative;width:100vw;height:100vh;background-color:#B5B5B6;"><span style="position:absolute;top:0px;left:0px;right:0px;bottom:0px;margin:auto;width:50vw;height:300px;background-color:red;">Hello world!</span>
</div>

不过这种方法也存在许多缺陷，比如：父元素div，子元素span（无论是块元素还是行元素）都需要给它定高定宽（auto不适用）才能使其实现居中的效果。（img可不用定宽高）

<div style="margin:0px;position:relative;width:100vw;height:100vh;background-color:#B5B5B6;"><div style="position:relative;top:50%;height:0px;"><div style="position:absolute;top:0px;left:0px;right:0px;bottom:0px;margin:auto;width:50vw;height:300px;background-color:red;">Hello world!</div></div>
</div>

上面的代码为绝对居中的改进版，可以定义居中点top位置。

关于CSS居中显示的总结相关推荐

html中怎么设置文本框居中显示图片,css如何让图片水平居中显示？
在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中. display属性实现图片居中的两种方法: 1 ...
网页html 图片横向摆放,css实现多张图片横向居中显示的方法
先讲一下实现的步骤: 最终效果 2. 代码实现 HTML部分分类小贴士 CSS部分 .main{ width:100%; margin-top:40px; } .main .tag{ margin: ...
CSS 如何让li横向居中显示
先给一个简单的示例HTML代码 [html] view plaincopy <body> <form id="form1" runat="server& ...
div css将文字居中显示图片,css文字居中、图片居中、div居中解决方案
一.文字居中若文字只有一行文本只有一行 .box { width: 200px; height: 200px; background-color: red; } .text { line-heig ...
在html如何让图片居中 css,CSS怎么让图片居中？如何让图片居中显示
众所周知,HTML 和 CSS 结合后功能强大,可以做出千变万化的样式,那么你知道如何用 CSS 让图片居中显示吗?本篇文章告诉你一.display:table-cell HTML 代码如下: CS ...
html div背景自动居中显示,网站背景图居中自适应以及拉伸填充CSS代码解决方法...
写这篇水文呢,也是最近在自己在魔改一个主题用作新做的班级网站. 发现模版的背景图片以及其他地方的图片显示只能在电脑端看到,而在移动端不能够自适应.顺便也整理出来. 首先是图片的居中自适应: 需要先给C ...
css布局：为什么margin-right不起效果，如何居中显示。
css布局:为什么margin-right不起效果 ,以及如何居中显示. 不清楚这个问题其实是没有弄明白网页水平布局的一个小原理假设这里有一个div,在这个div盒子里面有一个小的div盒子 (这里 ...
php图片居中显示图片,怎样让css图片居中显示
在项目中我们也经常会遇到这种情况,要让图片居中显示,方法有很多,不过最推荐的就是用CSS来操作DIV,那么下面就给大家举介绍俩种方法,用CSS操作让图片居中显示. 首先让图片中DIV对象盒子内水平居中 ...
CSS图片居中显示超出div容器高度度隐藏 css3 object-fit
CSS图片居中显示超出div容器高度度隐藏图片高度低于div容器高度上下不留白显示通过固定容器的宽高加上flex布局结合css3的属性object-fit实现 .el-image{width: ...
css如何实现让div中的多行文字居中显示
标题css如何实现让div中的多行文字居中显示最近在做项目的时候遇到一个div中有多行文字(可能一行也可能多行)需要实现居中显示,试了好多方法都不行,显然不能使用padding来居中,因为文字有多少 ...

关于CSS居中显示的总结

关于CSS居中显示的总结相关推荐

最新文章

热门文章