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的7种常用的垂直居中的方法的更多相关文章

  1. CSS的5种常用的垂直居中的方法

    1.绝对定位上下百分之五十然后上外边距做外边距都是他的宽高的一半 #child{ width: 200px; height: 150px; position: absolute; left: 50%; ...

  2. 通过CSS控制页面中的内容垂直居中的方法

    方法一:通过行高(line-height)定位 line-height通常是用于调节一段文字的行与行之间的距离,或者说两行文字之间的距离,如果行高是500px,那么每一行中的文字距离本行的顶部就是25 ...

  3. 解析6种常用View 的滑动方法

    View 的滑动是Android 实现自定义控件的基础,实现View 滑动有很多种方法,在这里主要讲解6 种滑动方法,分别是layout().offsetLeftAndRight()与offsetTo ...

  4. css实现块级元素水平垂直居中的方法?

    父级给相对定位,子级给绝对定位,margin设置为auto,上下左右值设为0. 父级给相对定位,子级给绝对定位,设置left和top为50%,再向左和向上移动负的子级一半. 父级设置display:f ...

  5. js中几种常用的数组处理方法的总结

    一.filter()用法 功能:用于筛选数组中满足条件的元素,返回一个筛选后的新数组. <script> $(function(){ var arr = [1,-2,3,4,-5]; va ...

  6. java十五个常用类学习及方法举例

    <code class="language-java">import java.util.Scanner; import java.util.Properties; i ...

  7. css两种常用的不定宽高的水平垂直居中方法,记住它,不再为样式发愁

    css 几种常用的简单容易记住的水平垂直居中方法 前言 正文 第一种方法 第二种方法 结束语 前言 我们在设计网页时,会大量的运用到水平垂直居中,如果知道元素的宽高,那水平垂直居中是很简单的,无非是用 ...

  8. 11种常用css样式之开篇文本字体学习

    常见css样式:1.字体与颜色2.背景属性3.文本属性4.边框属性5.鼠标光标属性6.列表样式7.定位属性8.内外边距9.浮动和清除浮动10.滚动条11.显示和隐藏 文本:1.letter-spaci ...

  9. html(常用标签,标签分类),页面模板, CSS(css的三种引入方式),三种引入方式优先级

    HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...

随机推荐

  1. C#后端调用前端的方法

    在我实际开发过程中,刚好遇到c#后端要调用前端js中的方法,所以研究了一下,特分享如下: 前端代码: <%@ Page Language="C#" AutoEventWire ...

  2. vue vscode 开始

    E:\Html\4 Vue版>npm config set registry https://registry.npm.taobao.org E:\Html\4 Vue版>npm i &g ...

  3. JAVA中的使用Filter过滤器设置字符集

    Filter是什么? Filter不是一个Servlet,它可以叫做Servlet链,它可以用来改变一个request,修改一个response.它虽然不能产生一个response,但可以在一个req ...

  4. 【bzoj4870】[Shoi2017]组合数问题 dp+快速幂/矩阵乘法

    题目描述 输入 第一行有四个整数 n, p, k, r,所有整数含义见问题描述. 1 ≤ n ≤ 10^9, 0 ≤ r < k ≤ 50, 2 ≤ p ≤ 2^30 − 1 输出 一行一个整数 ...

  5. HDU 6165 FFF at Valentine(Tarjan缩点+拓扑排序)

    FFF at Valentine Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) ...

  6. eclipse增加jar包方式对比

    add external jars  = 增加工程外部的包add jars = 增加工程内包add library = 增加一个库add class folder = 增加一个类文件夹 add jar ...

  7. mysql 导入

    1.默认情况下:MySQL导入文件大小有限制的,最大为2M,所以当文件很大时候,直接无法导入,可修改php.ini参数调整: 在php.ini中修改相关参数: 影响MySQL导入文件大小的参数有三个: ...

  8. SublimeText3自动补全python提示

    1.SublimeText3下载地址 https://www.sublimetext.com/3 2.安装SublimeText3 3.安装SublimeCodeIntel (1)打开SublimeT ...

  9. GPS经纬度的表示方法及换算

    想要认识GPS中的经纬度,就必须先了解GPS,知道经纬度的来源: 1. GPS系统组成 GPS是 Gloabal Positioning System 的简称,意为全球定位系统,主要由地面的控制站.天 ...

  10. pywordfrom

    http://files.cnblogs.com/files/zhang-pengcheng/pywordform-0.02.zip   Win8.1自带微软五笔输入法开启方法