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

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

    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. jQuery之核心API

    1. jQuery.holdReady()方法:暂停或恢复.ready() 事件的执行.在$.holdReady()方法允许调用者延迟jQuery的ready事件.这种先进的功能,通常会被用来允许在 ...

  2. Django模版语言 格式化显示 后台datatime()时间

    Django模版语言 格式化显示 后台datatime()时间 场景描述:

  3. Zabbix Trapper items

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px STHeiti; color: #313131 } span.s1 { } 概述 Trappe ...

  4. 利用django创建一个投票网站(五)

    创建你的第一个 Django 项目, 第五部分 这一篇从第四部分(en)结尾的地方继续讲起.我们在前几章成功的构建了一个在线投票应用,在这一部分里我们将其创建一些自动化测试. 自动化测试简介 自动化测 ...

  5. Linux服务器SSH无密码访问

    1.编辑Hosts文件: [root@yqtrack-elk01 /]# vim /etc/hosts

  6. mysql 创建存储过程报错

    在创建存储过程前把结束符定义为 delimiter // 然后再创建就不会报错

  7. easyUI combobox 控件 使用

    1,combobox 二级联动 (参数传递 函数调用) // toolbar 学校班级二级联动 var paramSearch = { school : $('#search-school'), cl ...

  8. chose.jquery 多选

    <select id="language" data-placeholder="选择类别..." class="chosen-select&qu ...

  9. Elasticsearch-5.0.0移植到ubuntu16.04

    旧环境: windows10 elasticsearch-5.0.0(含elasticsearch-head插件) 新环境: ubuntu16.04 由于环境换成了ubuntu,之前windows10 ...

  10. 用java解析字符串,如字符串"(1+2/5)*3"当成是数值表达式,进行计算出结果来

    import java.io.*;import javax.script.ScriptEngine;import javax.script.ScriptEngineManager;public cla ...