前言:
在写 CSS 的时候让元素在高度固定的容器中垂直居中是很简单的, 譬如设置容器的 padding 或者元素的 margin 之类的都可以做到; 让元素在容器中水平居中也有 text-align:center,margin:0 auto; 之类的属性来帮我们达到目的, 但是如何让元素在不确定高度的容器中垂直居中或者行数不确定的文字在高度固定的容器垂直居中呢? 下面我们来讨论几种让元素垂直居中的方法:
一, 文字的垂直居中
1, 单行文字
line-height 与 height 高度相同, 就可以让单行文字垂直居中
2, 多行文字
我们可以把多行的文字当做图片来处理, 用 span 将文字封装起来, 并设置与图片相同的 display 属性 (inline-block), 然后用处理图片垂直居中的方式让多行文字垂直居中即可.
- <div class="wrap">
- <span class="content">
- content<br>
- content
- </span>
- </div>
- .wrap {
- width: 200px;
- height: 200px;
- line-height: 200px;
- background-color: #36AF77;
- }
- .content {
- display: inline-block;
- vertical-align: middle;
- line-height: 15px;
- font-size: 14px;
- }
运行结果:
二, 图片的垂直居中
1, 通过 vertical-align 和 line-height 来实现垂直居中
- <div class="wrap">
- <img src="E:/picture/me.jpg" alt="">
- </div>
- .wrap {
- width: 200px;
- height: 200px;
- line-height: 200px;
- font-size: 0;
- background-color: #36AF77;
- }
- img {
- vertical-align: middle;
- }
运行结果:
2, 通过 100% 高度的 span 进行垂直居中
- <div class="wrap">
- <img src="E:/picture/me.jpg" alt=""><span></span>
- </div>
- .wrap {
- width: 200px;
- height: 200px;
- background-color: #36AF77;
- }
- img {
- vertical-align: middle;
- }
- span {
- display:inline-block;
- height: 100%;
- vertical-align: middle;
- }
运行结果:
这里的 img 与一个 height:100% 的 span 同行, 使这一行的行高撑满 div.
3, 背景图定位的方法
- <div class="wrap">
- </div>
- .wrap {
- width: 200px;
- height: 200px;
- background-color: #36AF77;
- background-image: url("E:/picture/me.jpg");
- background-position: center;
- background-size: 60%;
- background-repeat: no-repeat;
- }
运行结果:
这里将图片作为容器的背景, 通过 background-position 属性让它居中.
4, 通过 table-cell 来实现垂直居中
- <div class="wrap">
- <img src="E:/picture/me.jpg" alt="">
- </div>
- .wrap {
- width: 200px;
- height: 200px;
- background-color: #36AF77;
- display: table-cell;
- font-size: 0;
- vertical-align: middle;
- }
运行结果:
W3C 上对 vertical-align 的定义: vertical-align 属性设置元素的垂直对齐方式.
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐. 允许指定负长度值和百分比值. 这会使元素降低而不是升高.
在表单元格中, 这个属性会设置单元格框中的单元格内容的对齐方式.
5, 利用 flex 弹性布局实现垂直居中
- <div class="wrap">
- <img src="E:/picture/me.jpg" alt="">
- </div>
- img {
- width: 88px;
- height: 88px;
- }
- .wrap {
- width: 200px;
- height: 200px;
- background-color: #36AF77;
- display: flex;
- justify-content: center;
- align-items: center;
- }
运行结果:
可惜 IE10 之前的版本是不支持的, 大家自行尝试
6, 利用 after 伪类
- <div class="wrap">
- <img src="E:/picture/me.jpg" alt="">
- </div>
- img {
- width: 88px;
- height: 88px;
- }
- .wrap {
- width: 200px;
- height: 200px;
- background-color: #36AF77;
- }
- .wrap:after {
- content: "";
- display: inline-block;
- height: 100%;
- vertical-align: middle;
- }
- img {
- vertical-align: middle;
- }
运行结果:
这种方式和第二种类似, 只是用 after 伪类生成的元素代替了 span 元素而已.
7, 在已知图片高度的情况下借助额外的块级元素
- <div class="wrap">
- <div class="temp"></div>
- <img src="E:/picture/me.jpg" alt="">
- </div>
- img {
- width: 88px;
- height: 88px;
- }
- .wrap {
- width: 200px;
- height: 200px;
- background-color: #36AF77;
- }
- .temp {
- height: 50%;
- margin-bottom: -44px;
- opacity:0;
- }
运行结果:
opacity:0 // 透明不显示但是占位
8, 在已知图片高度的情况下借助 margin-top 负边距
- <div class="wrap">
- <img src="E:/picture/me.jpg" alt="">
- </div>
- img {
- width: 88px;
- height: 88px;
- }
- .wrap {
- position: relative;
- width: 200px;
- height: 200px;
- background-color: #36AF77;
- }
- img {
- position:absolute;
- top: 50%;
- left:0;
- right:0;
- margin:auto;
- margin-top: -44px;
- }
运行结果:
9, 借助绝对定位
- <div class="wrap">
- <img src="E:/picture/me.jpg" alt="">
- </div>
- .wrap {
- position: relative;
- width: 200px;
- height: 200px;
- background-color: #36AF77;
- }
- img {
- position:absolute;
- top:0;
- bottom:0;
- left:0;
- right:0;
- margin:auto;
- }
运行结果:
10, 主角最后登场 ---- 万能的居中方式 (绝对定位加 transform)
- <div class="wrap">
- <img class="center" src="E:/picture/me.jpg" alt="">
- </div>
- <div class="wrap">
- <img class="vertical-center" src="E:/picture/me.jpg" alt="">
- </div>
- <div class="wrap">
- <img class="horizon-center" src="E:/picture/me.jpg" alt="">
- </div>
- .center {
- left: 50%;
- top: 50%;
- position: absolute;
- -webkit-transform: translate3D(-50%,-50%,0);
- -ms-transform: translate3D(-50%,-50%,0);
- -moz-transform: translate3D(-50%,-50%,0);
- -o-transform: translate3D(-50%,-50%,0);
- transform: translate3D(-50%,-50%,0);
- z-index: 100;
- }
- .vertical-center {
- top: 50%;
- position: absolute;
- -webkit-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- -moz-transform: translateY(-50%);
- -o-transform: translateY(-50%);
- transform: translateY(-50%);
- z-index: 100;
- }
- .horizon-center {
- left: 50%;
- position: absolute;
- -webkit-transform: translateX(-50%);
- -ms-transform: translateX(-50%);
- -moz-transform: translateX(-50%);
- -o-transform: translateX(-50%);
- transform: translateX(-50%);
- z-index: 100;
- }
- .wrap {
- position: relative;
- width: 200px;
- height: 200px;
- margin-bottom: 10px;
- background-color: #36AF77;
- }
运行结果:
通过绝对定位到 50% 的位置, 再转换自己高度宽度 50% 的负距离来实现居中显示.
然而万能的方法并不万能, transform 在 IE9 及其以下是不支持的, 大家节哀.
关于水平居中文字可以用 text-align:center, 块级元素可以用 margin: 0 auto; 之类的实现, 比较简单就不多说了.
简单介绍了 10 种图片的的居中方法, 有没有觉得有所感悟, 妈妈再也不用担心我不会元素居中了.
以上
来源: https://www.cnblogs.com/MarcoHan/p/5257992.html