css垂直居中设置
转载自大佬的文章:纯css实现垂直居中的几种方法(https://www.cnblogs.com/hutuzhu/p/4450850.html)
总结得很棒,有好几种方法自己没用过的,拷贝过来给自己看看
垂直居中是布局中十分常见的效果之一,为实现良好的兼容性,PC端实现垂直居中的方法一般是通过绝对定位,table-cell,负边距等方法。有了css3,针对移动端的垂直居中就更加多样化。
方法1:table-cell
html结构:
<div class="box box1">
<span>垂直居中</span>
</div>
css:
.box1 {
display: table-cell;
vertical-align: middle;
text-align: center;
}
方法2:display:flex
.box2{
display: flex;
justify-content:center;
align-items:Center;
}
方法3:绝对定位和负边距
.box3{position:relative;}
.box3 span{
position: absolute;
width:100px;
height: 50px;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-25px;
text-align: center;
}
方法4:绝对定位和0
.box4 span{
width: 50%;
height: 50%;
background: #000;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
这种方法跟上面的有些类似,但是这里是通过margin:auto和top,left,right,bottom都设置为0实现居中,很神奇吧。不过这里得确定内部元素的高度,可以用百分比,比较适合移动端。
方法5:translate
.box6 span{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, 50%);
text-align: center;
}
这实际上是方法3的变形,移位是通过translate来实现的。
方法6:display:inline-block
.box7{
text-align:center;
font-size:0;
}
.box7 span{
vertical-align:middle;
display:inline-block;
font-size:16px;
}
.box7:after{
content:'';
width:0;
height:100%;
display:inline-block;
vertical-align:middle;
}
这种方法确实巧妙...通过:after来占位。
方法7:display:flex和margin:auto
.box8{
display: flex;
text-align: center;
}
.box8 span{margin: auto;}
方法8:display:-webkit-box

.box9{
display: -webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
-webkit-box-orient: vertical;
text-align: center
}

css3博大精深,可以实现很多创造性的效果,需要好好研究下。
今天又发现一种方法,现在补上:
方法9:display:-webkit-box
这种方法,在 content 元素外插入一个 div。设置此 div height:50%; margin-bottom:-contentheight;
。
content 清除浮动,并显示在中间。
<div class="floater"></div>
<div class="content"> Content here </div>

.floater {
float:left;
height:50%;
margin-bottom:-120px;
}
.content {
clear:both;
height:240px;
position:relative;
}

优点:
适用于所有浏览器
没有足够空间时(例如:窗口缩小) content 不会被截断,滚动条出现
缺点:
唯一我能想到的就是需要额外的空元素了(也没那么糟,又是另外一个话题)
css垂直居中设置的更多相关文章
- CSS垂直居中和水平居中
前言 CSS居中一直是一个比较敏感的话题,为了以后开发的方便,楼主觉得确实需要总结一下了,总的来说,居中问题分为垂直居中和水平居中,实际上水平居中是很简单的,但垂直居中的方式和方法就千奇百怪了. 内联 ...
- CSS垂直居中指南
大概整理下css中的垂直居中问题 主要分两大类 1 知道块元素尺寸,一般就是指知道元素高度. 方法一:最简单的,类比水平居中. 思路:子元素设置为absolute; top bottom都设置为0 ...
- 最常用的css垂直居中方法
css垂直居中一直以来都是一个被大家说烂了的话题,翻来覆去的炒.不过说实话,正是因为css没有提供标准的垂直居中方法(不过在css3中已经有了相关规范),所以大家才会对它进行专门的研究.这研究来研究去 ...
- 前端学习笔记之CSS属性设置
CSS属性设置 阅读目录 一 字体属性 二 文本属性 三 背景属性 四 盒子模型 五 盒子模型各部分详解 一 字体属性 1.font-weight:文字粗细 取值 描述 normal 默认值,标准 ...
- CSS样式设置小技巧
1.水平居中设置 行内元素居中设置:如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的.代码示例如下: HTML代码 <body&g ...
- 完美实现CSS垂直居中的11种方法
在做前端项目时CSS的水平居中我们经常使用,但有时还会用到CSS垂直居中,对于小白来说这个就有些难度了,下面看一下我是如何实现的 本人前端小白,正在做一个小程序开发的项目,css样式调整搞的头都大了. ...
- [CSS属性设置,盒子模型,网页布局]
[CSS属性设置,盒子模型,网页布局] CSS属性设置 1. 宽和高 width:属性可以为元素设置宽度. height:属性可以为元素设置高度. 块级标签的宽度不修改的情况下默认占浏览器的一整行,块 ...
- css 垂直居中技巧
CSS垂直居中技巧,我只会23个,你会几个?自古以来(是有多?~),网页CSS的垂直居中需求始终没有停过,而其困难度也始终没有让人轻松过,经过了每位开发先烈的研究后,据说CSS的垂直居中技巧已达到近十 ...
- css margin-top设置html元素之间的距离
css margin-top属性设置的是一个元素的顶端与另一个元素之间的距离.这个距离称为上外边距,本文章向大家介绍css margin-top属性的用法和实例,需要的朋友可以参考一下. css ma ...
随机推荐
- ios兼容问题
滑动卡顿: -webkit-overflow-scrolling:touch;
- 如何在MySQL中删除表中指定列的唯一键?
语法结构如下: alter table table_name drop index column_name;
- BZOJ 4289 最短路+优化建图
题意:给出一个N个点M条边的无向图,经过一个点的代价是进入和离开这个点的两条边的边权的较大值,求从起点1到点N的最小代价.起点的代价是离开起点的边的边权,终点的代价是进入终点的边的边权. 解法:参考h ...
- 第3篇K8S集群部署
一.利用ansible部署kubernetes准备: 集群介绍 本系列文档致力于提供快速部署高可用k8s集群的工具,并且也努力成为k8s实践.使用的参考书:基于二进制方式部署和利用ansible- ...
- spring framework三个版本的下载包区别
docs:该文件夹下包含Spring的相关文档.开发指南及API参考文档:dist:该文件夹下包含Spring jar包.文档.项目等内容:schema:里面包含了Spring4所用到的xsd文件:
- react 数据发生变化,页面改变的原理
数据发生变化,页面改变的原理: 比较虚拟的dom 不怎么损耗性能,真实的dom比较会损耗性能 1.state 数据 2.jsx 模板 3.生成虚拟的dom 3.数据和模板结合,生成虚拟的dom 4.用 ...
- 阿里linux-Centos各版本下载
https://mirrors.aliyun.com/centos/7/isos/x86_64/ Index of /centos/7/isos/x86_64/ ../ 0_README.txt 16 ...
- 深入理解Magento – 第二章 – Magento请求分发与控制器
深入理解Magento 作者:Alan Storm 翻译:Hailong Zhang 第二章 – Magento请求分发与控制器 Model-View-Controller (MVC) ,模型-视图- ...
- 一场comet常规赛的台前幕后
有出题的想法大概是#8比完之后,#8的比赛较易,应该是符合https://info.cometoj.com 上的常规赛难度说明. 我们几个觉得我们一定可以出质量更高的题. 那个时候在玩线段树的时碰巧想 ...
- delphi 内存映射
使用内存映射文件读写大文件 使用内存映射文件读写大文件 文件操作是应用程序最为基本的功能之一,Win32 API和MFC均提供有支持文件处理的函数和类.一般来说,这些函数可以满足大多数场合的要求,但是 ...