文档章节

垂直居中方法总结

小王JOJO
 小王JOJO
发布于 2016/07/02 15:02
字数 959
阅读 32
收藏 1

今天根据客户的修改意见,修改一组有带有缩略图片的标题的列表,图片在列表的最左边,图片的大小是固定的.要求是,标题字数如果过多的话,可以折成两行.但是要求垂直居中.最后解决了这个问题,但是没有做兼容性的测试.

下面就是我收集到的垂直的居中的几个方法,每个方法都拿出一个实例来演示

绝对居中

.relative-container{
    position:relative
}
.absolute-container{
    position:absolute;
    margin:auto;
    width:50%;
    height:50%;
    top: 0; left: 0; bottom: 0; right: 0;
}

一个栗子:垂直居中

优点:

  1. 兼容所有的浏览器
  2. 代码简单,没有太多的hack

缺点:

  1. 必须声明一个高度
  2. 在window phone上不起作用

负边框居中

.n-margin-container{
        width: 300px;  
        height: 200px;  
        padding: 20px;  
        position: absolute;  
        top: 50%; left: 50%;  
        margin-left: -170px; /* (width + padding)/2 */  
        margin-top: -120px; /* (height + padding)/2 */  
}

优点:

  1. 代码量少
  2. 兼容性好

缺点:

  1. 不支持自适应,不支持百分比和max-/min-属性
  2. 边距大小与padding,和是否定义box-sizing: border-box有关,计算需要根据不同情况。

变形

用transform属性来代替负边距

.transform-center{
    width: 50%;  
    margin: auto;  
    position: absolute;  
    top: 50%; left: 50%;  
    -webkit-transform: translate(-50%,-50%);  
      -ms-transform: translate(-50%,-50%);  
          transform: translate(-50%,-50%);  
}

优点:

  1. 相比负边距,能够自适应,支持百分比
  2. 代码少

缺点:

  1. IE8以下不支持
  2. 可能会影响其他的transform属性
  3. 某些情况下回出现文本或元素边界渲染模糊的现象

表格居中

算是终极大招吧

css:

.table-like{
    display:table;
}

.table-cell-like {  
  display: table-cell;  
  vertical-align: middle;  
}  
.Center-Block {  
  width: 50%;  
  margin: 0 auto;  
}  

html:

<div class="table-like">  
  <div class="table-cell-like">  
    <div class="Center-Block">  
    <!-- CONTENT -->  
    </div>  
  </div>  
</div>  

优点:

  1. 高度可变
  2. 内容溢出会将父元素撑开。
  3. 跨浏览器兼容性好。

缺点:

  1. 需要额外html标记

行内块元素

一个同事看到他用到过这种居中方法

/* This parent can be any width and height */
.block {
  text-align: center;
  /* May want to do this if there is risk the container may be narrower than the element inside */
  white-space: nowrap;
}
 
/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* 消除inline-block元素之间的间距,具体可以查看后面的参考 */
}

/* The element to be centered, can also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

html:

<div class="block" style="height: 300px;">
    <div class="centered">
        <h1>Some text</h1>
        <p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said—"Did ye see anything looking like men going towards that ship a while ago?"</p>
    </div>
</div>
<div class="block" style="height: 200px;">

例子:inline-block垂直居中

优点:

  1. 高度可变
  2. 内容溢出会将父元素撑开。
  3. 支持跨浏览器,也适应于IE7。

缺点:

  1. 需要一个容器
  2. 水平居中依赖于margin-left: -0.25em;该尺寸对于不同的字体/字号需要调整。
  3. 内容块宽度不能超过容器的100% - 0.25em。

flex

flex居中的例子

.flex-parent{
    display:flex;
    justify-content:center;
    align-items: center;
    background: #AAA;
    height: 300px;
}
.flex-child{
    background: #222;
    color: #FFF;
    width: 100px;
    height: 100px;    
}

html:

<div class="flex-parent">
  <div class="flex-child"></div>
</div>

优点:

  1. 内容块的宽高任意,优雅的溢出。
  2. 可用于更复杂高级的布局技术中。

缺点:

  1. IE8/IE9不支持。
  2. Body需要特定的容器和CSS样式。
  3. 运行于现代浏览器上的代码需要浏览器厂商前缀。
  4. 表现上可能会有一些问题

小结

  1. 绝对定位的方法比较万金油
  2. display:table的方法兼容性最好
  3. flex是未来的趋势
  4. transform是实现不知道要固定的框的大小情况下的好办法,但是元素可能会模糊

参考

© 著作权归作者所有

共有 人打赏支持
小王JOJO
粉丝 1
博文 7
码字总数 5082
作品 0
西青
程序员
私信 提问
垂直居中实现方式总结

在网页制作过程中,我们经常要用到图片、文字的垂直居中。今天总结一下垂直居中的方法。 方法一 利用 实现垂直居中 这种方法适用于单行文本垂直居中,如果文本内容太长,出现了换行,换行后的...

呵呵闯
2016/12/05
16
0
垂直居中实现方式总结

在网页制作过程中,我们经常要用到图片、文字的垂直居中。今天总结一下垂直居中的方法。 方法一 利用 实现垂直居中 这种方法适用于单行文本垂直居中,如果文本内容太长,出现了换行,换行后的...

musishui
2016/11/09
1K
1
css实现水平居中和垂直居中及其浏览器兼容性

不管是在网站的布局还是显示图片,需要水平居中和垂直居中的情况是很常见的。今天我们就开始对css的水平居中和垂直居中的一些常见方法在各种浏览器下进行测试和归纳。 浏览器说明:本文涉及到...

黄梦巍
2013/08/08
0
0
多行文字垂直居中

前几天一个同事告诉我可以垂直居中,我惊愕:“怎么会?不是只能水平居中吗!”。后面他告诉我,他刚发现在弹性布局下,是可以居中的... 于是有了这一篇笔记,希望能给前端朋友们一点点帮助。...

歇歇
2017/11/30
0
0
关于CSS制作水平/垂直居中对齐问题

作为前端开发者,在制作Web页面时都有碰到CSS制作水平垂直居中的问题,我想大家都有研究过或者写过,特别是其中的垂直居中,更是让人烦恼。这段时间,我收集了几种不同的方式制作水平/垂直居...

ACE-705
2014/05/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Confluence 6 快捷键

快捷键图标。 官方的下载地址为:https://atlassianblog.wpengine.com/wp-content/uploads/2018/01/keyboard-shortcuts-infographics.pdf...

honeymose
今天
2
0
Apache限定目录解析PHP,限制user_agent,PHP相关的配置

Apache限定目录解析PHP 配置前访问upload/index.php [root@test-a ~]# curl -x192.168.77.139:80 'www.test.com/upload/index.php'This is upload diretory 配置,/usr/local/apache2.4/......

野雪球
今天
3
0
java.util.Concurrent.Exchanger源码

类图 源码: package java.util.concurrent;import java.util.concurrent.atomic.AtomicInteger;import java.util.concurrent.atomic.AtomicReference;import java.util.concurrent......

狼王黄师傅
今天
6
0
Kubernetes里的secret最基本的用法

Secret解决了密码、token、密钥等敏感数据的配置问题,使用Secret可以避免把这些敏感数据以明文的形式暴露到镜像或者Pod Spec中。 Secret可以以Volume或者环境变量的方式使用。 使用如下命令...

JerryWang_SAP
昨天
5
0
2018-11-20学习笔记

1. python数据类型: 给变量赋值什么样的值,变量就是什么样的类型 给变量赋值整数,变量就是整数类型 给变量赋值字符串,变量就是字符串类型 123 和“123”一样吗? 在python中 单引号 与双...

laoba
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部