css实现垂直水平居中的5种方法
css实现垂直水平居中的5种方法
- 给父元素设置table-cell,text-align,vertical-align
#big{
width: 200px;
height: 200px;
border:1px solid #000;
display: table-cell;
text-align: center;
vertical-align: middle;
}
#small{
display: inline-block;
width: 50px;
height: 50px;
background: yellow;
vertical-align:middle;
}- 给子元素设置margin:auto
#big{
width: 200px;
height: 200px;
border:1px solid #000;
position: relative;
}
#small{
display: inline-block;
width: 50px;
height: 50px;
background: yellow;
position: absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}- 弹性盒
#big{
width: 200px;
height: 200px;
border:1px solid #000;
display: flex;
align-items: center;
justify-content: center;
}
#small{
display: inline-block;
width: 50px;
height: 50px;
background: yellow;
}- 利用translate实现，先进行绝对定位，然后通过translate让它自身往回移动50%
#big{
width: 200px;
height: 200px;
border:1px solid #000;
position: relative;
}
#small{
display: inline-block;
width: 50px;
height: 50px;
background: yellow;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}- 通过新创建一个元素，设置高为父元素的高，让div以这个元素来执行vertical-align
#big{
width: 200px;
height: 200px;
border:1px solid #000;
text-align: center;
}
#small{
display: inline-block;
width: 50px;
height: 50px;
background: yellow;
vertical-align: middle;
}
span{
display: inline-block;
width: 0;
height: 100%;
background: red;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="big">
<div id="small">
</div>
<span></span>
</div>
</body>css实现垂直水平居中的5种方法的更多相关文章
- CSS垂直居中和水平居中的几种方法
垂直居中 方法一 这个方法把div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align属性. <!DOCTYPE html> <html lang=" ...
- div垂直水平居中的四种方法总结
5.利用弹性布局 与 margin: <style> .container{ height: 600px; width: 600px; border:1px solid black; di ...
- css实现垂直水平居中的方法（个数不限）？
方法一:使用绝对定位 大家都知道margin:0 auto;能够实现水平居中,但却不知道margin:0 auto;也是可以实现垂直居中的: 给居中元素添加如下样式: .Absolute-Center ...
- 关于css垂直水平居中的几种方式
css中元素的垂直水平居中是比较常见及较常使用的,在这里向大家介绍一下几种方式. 1.水平居中 margin: 0 auto; 效果图: 而文字的垂直水平居中也比较简单,加上line-height: ...
- CSS教程:div垂直居中的N种方法以及多行文本垂直居中的方法
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- CSS教程:div垂直居中的N种方法[转]
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- css如何实现垂直居中（5种方法）
css如何实现垂直居中(5种方法) 一.总结 一句话总结:行内只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了. 块的话可以尝试 margin:auto: ...
- CSS中隐藏内容的3种方法及属性值
CSS中隐藏内容的3种方法及属性值 (2011-02-11 13:33:59) 在制作网页时,隐藏内容也是一种比较常用的手法,它的作用一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出 ...
- css划隔横线的两种方法
css划隔横线的两种方法 方法一:用DIV,代码如下:(推荐此方法) <div style="width:800px;height:1px;margin:0px auto;pa ...
随机推荐
- 微信小程序入门（一）
想必当你对官方文档了解地差不多的时候,一颗跃跃欲试的心就开始骚动了吧. 开发小程序之前的准备工作: 1).准备一个域名 2).准备一台云服务器 3).搭建小程序的后台,博主的小程序后台请求的的是自己写 ...
- Mybatis按顺序获取数据
sql语句select * from producttg where hospitalcode in (1,2,3) 获取到的数据并不是按照条件1,2,3的顺序排列,如果要成下面形式(mybatis ...
- windows服务启动有界面的程序
大家写windows服务守护进程的时候,肯定会遇到启动的程序看不到界面,只能在任务管理器里面看到xxx.exe问题. 发现可能有如下情况 a.无论是开机,还是程序被关掉后,守护服务启动的程序只能看到任 ...
- K-Means和图片压缩
通俗的介绍这种压缩方式,就是将原来很多的颜色用少量的颜色去表示,这样就可以减小图片大小了.下面首先我先介绍下K-Means,当你了解了K-Means那么你也很容易的可以去理解图片压缩了,最后附上图片压 ...
- 使用AspectCore动态代理
前言 最近越来越多的同学关注到AspectCore,并且提出不少中肯的建议,其中最多的提议是希望能够看到更多的关于AspectCore使用方式的文章和Demo.那么在这篇文章里,我们就来聊聊Aspec ...
- C#设计模式之十五命令模式（Command Pattern）【行为型】
一.引言 今天我们开始讲"行为型"设计模式的第二个模式,该模式是[命令模式],又称为行动(Action)模式或交易(Transaction)模式,英文名称是:Command P ...
- 做技术，有没有必要参加IT培训
近几年,IT培训机构可谓是琳琅满目,稂莠不齐.培训Java的,培训PHP的,培训大数据的等等吧,不一而足. 自己也算是IT技术圈子待了好多年了,面试过一些机构培训出来的学生,也有几个好哥们在培训机构做 ...
- 关于SpringBoot bean无法注入的问题（与文件包位置有关）改变自动扫描的包
原因:同事在写demo时出现bean加了@component后却无法被spring扫描到(在编译的时候IDEA就提示拿不到对应的bean)的问题. 后来经过研究是跟文件包的位置有关的. springb ...
- 认识 Less
CSS(层叠样式表)是一项出色的技术,它使得网页的表现与内容完全分离,使网站维护工作变得更容易,不会因为内容的改变而影响表现,也不会因为表现的改变而影响内容. 作为一门标记性语言,CSS 的先天性优点 ...
- 并行设计模式（二）-- Master-Worker模式
Java多线程编程中,常用的多线程设计模式包括:Future模式.Master-Worker模式.Guarded Suspeionsion模式.不变模式和生产者-消费者模式等.这篇文章主要讲述Mast ...