html结构:

<div class="box">
<div>垂直居中</div>
</div>

方法1:display:flex

.box{

    display: flex;

    justify-content:center;

    align-items:Center;

}

方法2:绝对定位和负边距

.box{position:relative;}
.box div{ position: absolute; width:100px; height: 50px; top:%; left:%; margin-left:-50px; margin-top:-25px; text-align: center; }

方法3:translate

.box childdiv{

            position: absolute;

            top:%;

            left:%;

            width:%;

            transform:translate(-%,-%);

            text-align: center;

        }

方法4:table-cell

.box{

    display: table-cell;

    vertical-align: middle;

    text-align: center;        

}

方法5:偏移量0+margin:auto

父元素设置相对或绝对定位;要居中的子元素设置绝对定位,所有偏移量为0,外边距为auto:

.wrap{

  positon:relative;
}
.center{ positon:absolute; top:;bottom:;left:;right:; margin:auto;
}

css实现垂直水平居中的方法的更多相关文章

  1. css实现垂直水平居中的方法(个数不限)?

    方法一:使用绝对定位 大家都知道margin:0 auto;能够实现水平居中,但却不知道margin:0 auto;也是可以实现垂直居中的: 给居中元素添加如下样式: .Absolute-Center ...

  2. css实现垂直水平居中的5种方法

    css实现垂直水平居中的5种方法 给父元素设置table-cell,text-align,vertical-align #big{ width: 200px; height: 200px; borde ...

  3. css图片垂直水平居中及放大(实现水平垂直居中的效果有哪些方法?)

    实现水平垂直居中方法有很多种: 一.万能法: 1.已知高度宽度元素的水平垂直居中,利用绝对定位和负边距实现. <style type="text/css"> .wrap ...

  4. CSS之垂直水平居中的背后

    最开始,我想说,这个体系有点大,我写的并不好.就当作是一个思路吧,虽然这个思路有点乱.几乎每一个实现方案的背后都是该属性及其组合的原理,每一个都要剖析其规范细节的话,这篇文章绝不会是这样的篇幅,所以每 ...

  5. css文本垂直水平居中

    一.单行文本居中 .content{ height:100px; line-height:100px; text-align:center; border:1px solid red; } 效果图 二 ...

  6. Css实现垂直水平居中的六种方法

    经常在项目中用到,今天总结了一下: 演示地址:http://codepen.io/anon/pen/xGdpOa 以下两个类为公共类,便于更好的显示效果,非核心代码 .common{ width: 6 ...

  7. css中设置div垂直水平居中的方法

    设置要水平垂直居中的div的position为absolute,left:50%;margin-left为负的这个元素宽度的一半,同理,top:50%;margin-top为负的这个元素的高度的一半. ...

  8. CSS之垂直水平居中方法

    //居中方法1 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 346px; height ...

  9. CSS实现垂直水平居中

    HTML结构: <div class="wrapper"> <div class="content"></div> < ...

随机推荐

  1. Java注解(Annotation):请不要小看我!

    Java注解是一系列元数据,它提供数据用来解释程序代码,但是注解并非是所解释的代码本身的一部分.注解对于代码的运行效果没有直接影响. 网络上对注解的解释过于严肃.刻板,这并不是我喜欢的风格.尽管这样的 ...

  2. ASP.NET Core中使用GraphQL - 第一章 Hello World

    前言 你是否已经厌倦了REST风格的API? 让我们来聊一下GraphQL. GraphQL提供了一种声明式的方式从服务器拉取数据.你可以从GraphQL官网中了解到GraphQL的所有优点.在这一系 ...

  3. SpringBoot整合Swagger2,再也不用维护接口文档了!

    前后端分离后,维护接口文档基本上是必不可少的工作.一个理想的状态是设计好后,接口文档发给前端和后端,大伙按照既定的规则各自开发,开发好了对接上了就可以上线了.当然这是一种非常理想的状态,实际开发中却很 ...

  4. FragmentTabHostTopDemo【FragmentTabHost固定宽度且居中】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 使用FragmentTabHost实现顶部选项卡(居中且宽度非全屏)展现. 备注:该Demo主要是演示FragmentTabHost ...

  5. Java~命名规范

    下面总结以点java命名规范 虽然感觉这些规范比起C#来说有点怪,但还是应该尊重它的命名! 命名规范 项目名全部小写 包名全部小写 类名首字母大写,如果类名由多个单词组成,每个单词的首字母都要大写. ...

  6. 浅析关于java的一些基础问题(上篇)

    要想让一个问题变难,最基本有两种方式,即极度细化和高度抽象.对于任何语言的研究,良好的基础至关重要,本篇文章,将从极度细化的角度 来解析一些java中的基础问题,这些问题也是大部分编程人员的软肋或易混 ...

  7. vs2015安装编辑神器:resharper10.0

    在平时的开发工作中,作为一名程序员,难免会想办法找到适合自己的开发编辑器.这款插件来自JetBrains公司.接下来就来教大家如何对这款软件进行安装与破解. 1:首先下载与安装.如果没有找到适合的资源 ...

  8. while,for,if输入账号密码判断(还请各位大牛能够优化,本人刚学习一周)

    AccountNumber1 = [] password1 = [] flag = True while flag: num = 0 a = 1 print('-----------这是个欢迎界面-- ...

  9. Java建造(Builder)模式

    一.什么是建造模式: 建造模式可以将一个产品的内部表象与产品的生成过程分割开来,从而使一个建造过程生成具有不同内部表象的产品.客户端不需要知道产品内部的结构和生产过程. 二.建造模式的结构: Buil ...

  10. 01. Overview Redis 关于Redis

    LOGO