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 ...
随机推荐
- CopyOnWriteArrayList并发容器
CopyOnWriteArrayList并发容器 Copy-On-Write简称COW,是一种用于程序设计中的优化策略.其基本思路是,从一开始大家都在共享同一个内容,当某个人想要修改这个内容的时候,才 ...
- Java微信公众平台开发_07_JSSDK图片上传
一.本节要点 1.获取jsapi_ticket //2.获取getJsapiTicket的接口地址,有效期为7200秒 private static final String GET_JSAPITIC ...
- sql分区文件删不的可能解决方法
删除数据库分区的时候报错如下: ALTER DATABASE [ITMP2] remove FILE F20170427Msg 5042, Level 16, State 1, Line 1The f ...
- Velocity(1)——初步入门
1.变量 (1)变量的定义: 1 #set($name = "hello") 说明:velocity中变量是弱类型的. 2 3 当使用#set 指令时,括在双引号中的字面字符串将解 ...
- 浅谈Android中的组播(多播)
组播使用UDP对一定范围内的地址发送相同的一组Packet,即一次可以向多个接受者发出信息,其与单播的主要区别是地址的形式.IP协议分配了一定范围的地址空间给多播(多播只能使用这个范围内的IP),IP ...
- 一道变态的Javascript面试题
转载http://cymoft.blog.51cto.com/324099/1260099 1 2 3 4 5 6 7 8 9 f = function() {return true;}; g = ...
- 详谈Javascript类与继承
本文将从以下几方面介绍类与继承 类的声明与实例化 如何实现继承 继承的几种方式 类的声明与实例化 类的声明一般有两种方式 //类的声明 var Animal = function () { this. ...
- PCL+VS2010环境配置
PCL+VS2010环境配置 我本是效率至上的Linux党,但是PCL在Ubuntu下配置了几次都失败,不得不选择Windows 1.下载 http://go.rritw.com/www.pointc ...
- 使用 Bundle 在 Activity 之间交换数据
[toc] 使用 Bundle 在 Activity 之间交换数据 场景 当一个 Activity 启动另一个 Activity 时,常常会有一些数据需要传过去.因为两个 Activity 之间本来就 ...
- C++PRIMER 阅读笔记 第三章
本章主要介绍 string vector 和 bitset, 不能贪多,现在本文主要介绍 string 与 vector 头文件中最好不要使用namespace std, 因为头文件会直接被预处理器放 ...