CSS的5种常用的垂直居中的方法
1、绝对定位上下百分之五十然后上外边距做外边距都是他的宽高的一半
#child{
width: 200px;
height: 150px;
position: absolute;
left: 50%;
top:50%;
margin-top: -75px;
margin-left: -100px;
}
2、根据上面的方法有一定的变化,不过也是根据绝对定位
.child{
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
}
3、用于文本且单行,line-height要等于父元素高度
.div{
text-align:center;
line-height: 100px;
background-color:#fff;
}
4、利用display:table;与display:table-cell;(注意只有.child框内元素会垂直居中)
.parent{
display: table;
}
.child{
display: table-cell;
vertical-align: middle;
text-align: center;
background-color: #fff;
}
5、利用css3的transfrom
.child{
width: 10px;
height: 10px;
background-color: #fff;
position: relative;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
}
6、绝对定位不需要知道宽高
.child{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); /*水平垂直居中*/
}
7、flex垂直居中方式
.child{
display: flex;
justify-content: center; /*水平居中*/
align-items: center; /*垂直居中*/
}
CSS的5种常用的垂直居中的方法的更多相关文章
- CSS的7种常用的垂直居中的方法
1.绝对定位上下百分之五十然后上外边距做外边距都是他的宽高的一半 #child{ width: 200px; height: 150px; position: absolute; left: 50%; ...
- 通过CSS控制页面中的内容垂直居中的方法
方法一:通过行高(line-height)定位 line-height通常是用于调节一段文字的行与行之间的距离,或者说两行文字之间的距离,如果行高是500px,那么每一行中的文字距离本行的顶部就是25 ...
- 解析6种常用View 的滑动方法
View 的滑动是Android 实现自定义控件的基础,实现View 滑动有很多种方法,在这里主要讲解6 种滑动方法,分别是layout().offsetLeftAndRight()与offsetTo ...
- css实现块级元素水平垂直居中的方法?
父级给相对定位,子级给绝对定位,margin设置为auto,上下左右值设为0. 父级给相对定位,子级给绝对定位,设置left和top为50%,再向左和向上移动负的子级一半. 父级设置display:f ...
- js中几种常用的数组处理方法的总结
一.filter()用法 功能:用于筛选数组中满足条件的元素,返回一个筛选后的新数组. <script> $(function(){ var arr = [1,-2,3,4,-5]; va ...
- java十五个常用类学习及方法举例
<code class="language-java">import java.util.Scanner; import java.util.Properties; i ...
- css两种常用的不定宽高的水平垂直居中方法,记住它,不再为样式发愁
css 几种常用的简单容易记住的水平垂直居中方法 前言 正文 第一种方法 第二种方法 结束语 前言 我们在设计网页时,会大量的运用到水平垂直居中,如果知道元素的宽高,那水平垂直居中是很简单的,无非是用 ...
- 11种常用css样式之开篇文本字体学习
常见css样式:1.字体与颜色2.背景属性3.文本属性4.边框属性5.鼠标光标属性6.列表样式7.定位属性8.内外边距9.浮动和清除浮动10.滚动条11.显示和隐藏 文本:1.letter-spaci ...
- html(常用标签,标签分类),页面模板, CSS(css的三种引入方式),三种引入方式优先级
HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...
随机推荐
- 基于C/S架构的3D对战网络游戏C++框架_04客户端详细设计与OpenGL、Qt基础
本系列博客主要是以对战游戏为背景介绍3D对战网络游戏常用的开发技术以及C++高级编程技巧,有了这些知识,就可以开发出中小型游戏项目或3D工业仿真项目. 笔者将分为以下三个部分向大家介绍(每日更新): ...
- Style样式
最重要的两个元素 :setter Trigger Style中的Setter setter是用来设置属性值的 <Style TargetType="{x:Type TextBox} ...
- booting logo & booting animation
開機第一張圖片: 圖片位置: linux_repo/vendor/mediatek/proprietary/bootable/bootloader/lk/dev/logo 因為 project 選用 ...
- IFC是什么
IFC是用EXPRESS语言来描述的一种数据格式 IFC的物理文件 为了数据交换的目的,STEP标准Prat 21规定了正文文件的结构,认为一个STEP文件或一个Part 21文件包括两端:头段和数据 ...
- mysqlbinlog抽取某个表的信息
http://blog.163.com/zhao_jw/blog/static/180587366201110293630648/
- MVC其实很简单(Django框架)
Django框架MVC其实很简单 让我们来研究一个简单的例子,通过该实例,你可以分辨出,通过Web框架来实现的功能与之前的方式有何不同. 下面就是通过使用Django来完成以上功能的例子: 首先,我们 ...
- 虚拟机下Centos7如何设置静态IP地址
最近在学习linux环境部署~~~~ 首先,将网络适配设置成为桥接模式 查看本机IP地址,ipconfig,记住ipv4地址和默认网关地址,等会配置的时候要用 启动Centos,进入终端模式,设置IP ...
- Android开发工具: AS, Gradle, Git等
(一)史上最详细的Android Studio系列教程 你还没有使用Android Studio + Gradle么?那就有点太落伍了,下面自己原创总结了Android Studio的一系列教程,图文 ...
- 【USACO 3.2】Factorials(阶层非零尾数)
题意:输出n的阶层最后一个非0数. 题解:可以把5和2的个数算出来,每次把5和2都除掉,最后乘上比5多出来的2.我的解法是,每次把尾巴的0去掉,并且保留3位,算到最后取尾数就可以了.. /* TASK ...
- (转)git常见错误
如果输入$ Git remote add origin git@github.com:djqiang(github帐号名)/gitdemo(项目名).git 提示出错信息:fatal: remote ...