css垂直居中布局总结

lentoo 发布于2019-08-29 14:17 / 992人阅读

摘要：简介总结记录一下经常需要用到垂直居中布局，欢迎补充空手套。。。

简介

总结记录一下经常需要用到垂直居中布局，欢迎补充(空手套。。。O(∩_∩)O)

以下栗子如果未特别标注同一使用这样的html结构

垂直居中布局 利用绝对定位和负margin

绝对定位可以很容易做到top:50%，现在只要再让目标元素上移自身高度的一半就垂直居中了

.container {
  background: #777777;
  height: 400px;
  position: relative;
}

.container .content {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  margin-top: -50px;
  left: 50%;
  margin-left: -50px;
  background: #ee5f28;
}

优点：兼容性好
缺点：需要知道居中元素的高度

利用绝对定位和transform

 .container {
  background: #777777;
  height: 400px;
  position: relative;
}

.container .content {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  background: #ee5f28;
}

优点：不需要考虑content元素的高度

缺点：兼容性

利用绝对定位和calc

.container {
  background: #777777;
  height: 400px;
  position: relative;
}

.container .content {
  width: 100px;
  height: 100px;
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  background: #ee5f28;
}

优点：相比于前面少了两条样式

缺点：兼容性

利用flex

.container {
  background: #777777;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container .content {
  width: 100px;
  height: 100px;
  background: #ee5f28;
}

.container {
  background: #777777;
  height: 400px;
  display: flex;
}

.container .content {
  width: 100px;
  height: 100px;
  background: #ee5f28;
  margin: auto;
}

优点：垂直居中特别容易搞定

缺点：兼容性

震惊absoulute（绝对定位）还可以这样用

.container {
  background: #777777;
  height: 400px;
  position: relative;
}

.container .content {
  width: 100px;
  height: 100px;
  background: #ee5f28;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

优点：

1.跨浏览器，兼容性好（无需hack，可兼顾IE8~IE10）；

2.无特殊标记，样式更精简；

3.自适应布局，可以使用百分比和最大最小高宽等样式；

4.居中时不考虑元素的padding值（也不需要使用box-sizing样式）；

5.布局块可以自由调节大小；6.img的图像也可以使用

6.浏览器支持：Chrome、Firefox、Safari、Mobile Safari、IE8-10。 “完全居中”经测试可以完美地应用在最新版本的Chrome、Firefox、Safari、Mobile Safari中，甚至也可以运行在IE8~IE10上

使用inline-block

.container {
  background: #777777;
  height: 400px;
  text-align: center;
  font-size: 0;
  overflow: auto;
}

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

.container .content {
  display: inline-block;
  vertical-align: middle;
  width: 100px;
  height: 100px;
  background: #ee5f28;
}

这里注意：容器‘container’里要设置font-size:0;避免inline-block之间产生间隔

优点：

内容高度可变

内容溢出则能自动撑开父元素高度

浏览器兼容性好，甚至可以调整支持IE7

使用table与table-cell





  
  
  
  Document

优点：

内容高度可变

内容溢出则能自动撑开父元素高度

浏览器兼容性好

缺点：额外标签

参考资料

https://caniuse.com/

https://www.w3cplus.com/css3/...

http://blog.jobbole.com/46574/

云服务器 GPU云服务器垂直居中实现垂直居中水平垂直居中文字垂直居中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113047.html

前端-CSS3&H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

xiaolinbang 2019-08-29 14:14 评论0 收藏0
css对齐方案总结

摘要：核心代码利用布局利用布局，其中用于设置或检索弹性盒子元素在主轴横轴方向上的对齐方式而属性定义子项在容器的当前行的侧轴纵轴方向上的对齐方式。核心代码相对于的水平垂直居中列表布局兼容性好核心代码布局核心代码css对齐方案总结垂直居中通用布局方式(内敛元素和块状元素都适用) 利用flex:核心代码: 12345 .container{ display:flex; ...

marek 2019-04-23 11:45 评论0 收藏0
css table布局大法，解决你大部分居中、多列等高、左右布局的问题

摘要：基于这样的布局方式，你就可以把什么定高不定高定宽不定宽多行单行的水平垂直居中都搞定了。且不支持这就是所谓的布局大法。看了这篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中不定高水平垂直居中单行定高水平垂直居中单行不定高水平垂直居中多行定高水平垂直居中多行不定高水平垂直居中多列等高布局左边定宽右边自适应布局左边右边定宽中间自适应三列布局最...

lijinke666 2019-08-29 11:22 评论0 收藏0
css table布局大法，解决你大部分居中、多列等高、左右布局的问题

摘要：基于这样的布局方式，你就可以把什么定高不定高定宽不定宽多行单行的水平垂直居中都搞定了。且不支持这就是所谓的布局大法。看了这篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中不定高水平垂直居中单行定高水平垂直居中单行不定高水平垂直居中多行定高水平垂直居中多行不定高水平垂直居中多列等高布局左边定宽右边自适应布局左边右边定宽中间自适应三列布局最...

hedge_hog 2019-08-20 11:16 评论0 收藏0
css table布局大法，解决你大部分居中、多列等高、左右布局的问题

摘要：基于这样的布局方式，你就可以把什么定高不定高定宽不定宽多行单行的水平垂直居中都搞定了。且不支持这就是所谓的布局大法。看了这篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中不定高水平垂直居中单行定高水平垂直居中单行不定高水平垂直居中多行定高水平垂直居中多行不定高水平垂直居中多列等高布局左边定宽右边自适应布局左边右边定宽中间自适应三列布局最...

kun_jian 2019-08-01 15:45 评论0 收藏0