css实现垂直水平居中的方法
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实现垂直水平居中的方法的更多相关文章
- css实现垂直水平居中的方法(个数不限)?
方法一:使用绝对定位 大家都知道margin:0 auto;能够实现水平居中,但却不知道margin:0 auto;也是可以实现垂直居中的: 给居中元素添加如下样式: .Absolute-Center ...
- css实现垂直水平居中的5种方法
css实现垂直水平居中的5种方法 给父元素设置table-cell,text-align,vertical-align #big{ width: 200px; height: 200px; borde ...
- css图片垂直水平居中及放大(实现水平垂直居中的效果有哪些方法?)
实现水平垂直居中方法有很多种: 一.万能法: 1.已知高度宽度元素的水平垂直居中,利用绝对定位和负边距实现. <style type="text/css"> .wrap ...
- CSS之垂直水平居中的背后
最开始,我想说,这个体系有点大,我写的并不好.就当作是一个思路吧,虽然这个思路有点乱.几乎每一个实现方案的背后都是该属性及其组合的原理,每一个都要剖析其规范细节的话,这篇文章绝不会是这样的篇幅,所以每 ...
- css文本垂直水平居中
一.单行文本居中 .content{ height:100px; line-height:100px; text-align:center; border:1px solid red; } 效果图 二 ...
- Css实现垂直水平居中的六种方法
经常在项目中用到,今天总结了一下: 演示地址:http://codepen.io/anon/pen/xGdpOa 以下两个类为公共类,便于更好的显示效果,非核心代码 .common{ width: 6 ...
- css中设置div垂直水平居中的方法
设置要水平垂直居中的div的position为absolute,left:50%;margin-left为负的这个元素宽度的一半,同理,top:50%;margin-top为负的这个元素的高度的一半. ...
- CSS之垂直水平居中方法
//居中方法1 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 346px; height ...
- CSS实现垂直水平居中
HTML结构: <div class="wrapper"> <div class="content"></div> < ...
随机推荐
- Java注解(Annotation):请不要小看我!
Java注解是一系列元数据,它提供数据用来解释程序代码,但是注解并非是所解释的代码本身的一部分.注解对于代码的运行效果没有直接影响. 网络上对注解的解释过于严肃.刻板,这并不是我喜欢的风格.尽管这样的 ...
- ASP.NET Core中使用GraphQL - 第一章 Hello World
前言 你是否已经厌倦了REST风格的API? 让我们来聊一下GraphQL. GraphQL提供了一种声明式的方式从服务器拉取数据.你可以从GraphQL官网中了解到GraphQL的所有优点.在这一系 ...
- SpringBoot整合Swagger2,再也不用维护接口文档了!
前后端分离后,维护接口文档基本上是必不可少的工作.一个理想的状态是设计好后,接口文档发给前端和后端,大伙按照既定的规则各自开发,开发好了对接上了就可以上线了.当然这是一种非常理想的状态,实际开发中却很 ...
- FragmentTabHostTopDemo【FragmentTabHost固定宽度且居中】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 使用FragmentTabHost实现顶部选项卡(居中且宽度非全屏)展现. 备注:该Demo主要是演示FragmentTabHost ...
- Java~命名规范
下面总结以点java命名规范 虽然感觉这些规范比起C#来说有点怪,但还是应该尊重它的命名! 命名规范 项目名全部小写 包名全部小写 类名首字母大写,如果类名由多个单词组成,每个单词的首字母都要大写. ...
- 浅析关于java的一些基础问题(上篇)
要想让一个问题变难,最基本有两种方式,即极度细化和高度抽象.对于任何语言的研究,良好的基础至关重要,本篇文章,将从极度细化的角度 来解析一些java中的基础问题,这些问题也是大部分编程人员的软肋或易混 ...
- vs2015安装编辑神器:resharper10.0
在平时的开发工作中,作为一名程序员,难免会想办法找到适合自己的开发编辑器.这款插件来自JetBrains公司.接下来就来教大家如何对这款软件进行安装与破解. 1:首先下载与安装.如果没有找到适合的资源 ...
- while,for,if输入账号密码判断(还请各位大牛能够优化,本人刚学习一周)
AccountNumber1 = [] password1 = [] flag = True while flag: num = 0 a = 1 print('-----------这是个欢迎界面-- ...
- Java建造(Builder)模式
一.什么是建造模式: 建造模式可以将一个产品的内部表象与产品的生成过程分割开来,从而使一个建造过程生成具有不同内部表象的产品.客户端不需要知道产品内部的结构和生产过程. 二.建造模式的结构: Buil ...
- 01. Overview Redis 关于Redis
LOGO