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. 【深度学习Deep Learning】资料大全

    最近在学深度学习相关的东西,在网上搜集到了一些不错的资料,现在汇总一下: Free Online Books  by Yoshua Bengio, Ian Goodfellow and Aaron C ...

  2. FPGA与simulink联合实时环路系列——实验二LED

    实验二LED 实验内容 在实验一的基础上,将simulink产生的测试信号输出到FPGA开发板上的LED灯进行显示,这里要在生成的硬件模型上进行修改,将传送到FPGA的信号输出到8个LED灯上,并且对 ...

  3. 使用 Docker 编译 OpenWRT(Widora)

    Docker 是一种新的被称之为容器的虚拟机.本文将使用此工具,进行 OpenWRT 的编译. 在 Docker 中下载 Ubuntu 14.04 的镜像 使用以下命令可以十分方便的从远程服务器上将 ...

  4. Android工程的编译过程

    现在很多人想对Android工程的编译和打包进行自动化,比如建立每日构建系统.自动生成发布文件等等.这些都需要我们对Android工程的编译和打包有一个深入的理解,至少要知道它的每一步都做了什么,需要 ...

  5. mtk flash tool,Win7 On VirtualBox

    SP_Flash_Tool_exe_Windows_v5.1624.00.000 Win7 在 VirtualBox, 安裝 mtk flash tool, v5.1628 在燒錄時會 fail. v ...

  6. 以.net core重构原有.net framework过程中的一些API变更记录(持续更新)

    1)Type.IsGenericType类似属性变更 以下是.net framework 4.5中Type抽象类中泛型类型的几个个属性,用于泛型类型的相关信息判断: 以下是.net core(nets ...

  7. 页面局部跳转(iframe)

    <script type="text/javascript"> function show() { document.getElementById("ff&q ...

  8. 一.Jenkins安装

    1.Java安装: 安装包:jdk-8u73-windows-x64.exe.jdk-8u73-windows-i586.exe(i586是32位系统包) Java环境变量配置:http://jing ...

  9. Map工具系列-08-map控件查看器

    所有cs端工具集成了一个工具面板 -打开(IE) Map工具系列-01-Map代码生成工具说明 Map工具系列-02-数据迁移工具使用说明 Map工具系列-03-代码生成BySQl工具使用说明 Map ...

  10. windows常用快捷键

    windows常用快捷键 Fn+F1:Windows的支持和帮助 =Windows 徽标+F1 Fn+F2:重命名对象 Fn+F3:查找所有文件 Fn+F4:选择“转到不同的文件夹”框并沿框中的项向下 ...