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 ...
随机推荐
- python基础-------函数（三）
迭代器 一.迭代的概念 迭代:1 重复2 下一次重复是基于上一次的结果 l=['a','b','c','d'] count=0while count < len(l): print(l[coun ...
- flex词法解析
例子1.从标准输入的字数.单词.行数统计 %{ #include <string.h> int chars = 0; int lines = 0; int words = 0; %} %% ...
- HTTPS 传输优化详解之动态 TLS Record Size
笔者在过去分析了诸多可以减少 HTTPS 传输延迟的方法,如分布式 Session 的复用: 启用 HSTS,客户端默认开启 HTTPS 跳转:采用 HTTP/2 传输协议:使用 ChaCha20-P ...
- python打包exe pyinstaller 简单使用
源由 最近公司让做了一个小工具,使用python写的,写完之后要求能放在其它电脑上运行,于是就开始寻找方案; 按网上的说法 py2exe已经很久没更新了,资料也不多: 于是就采用pyinstaller ...
- 负载均衡手段之DNS轮询
大多数域名注册商都支持对统一主机添加多条A记录,这就是DNS轮询,DNS服务器将解析请求按照A记录的顺序,随机分配到不同的IP上,这样就完成了简单的负载均衡.下图的例子是:有3台联通服务器.3台电信服 ...
- 安装freemarker模板的ftl插件
安装freemarker模板的ftl插件 同意协议 等待运行完成 重新启动eclipse 查看是否生效
- [最短路]P1828 香甜的黄油 Sweet Butter
题目描述 农夫John发现做出全威斯康辛州最甜的黄油的方法:糖.把糖放在一片牧场上,他知道N(1<=N<=500)只奶牛会过来舔它,这样就能做出能卖好价钱的超甜黄油.当然,他将付出额外的费 ...
- javac 实现原理
javac 概述 javac 是jdk bin目录下的一个脚本. 用于编译 java程序的源代码,但是 其实现的本质 是基于 jdk 标准类库中的 javac类库实现,所以java的编译器实质上是一个 ...
- JQuery之事件冒泡
JQuery 提供了两种方式来阻止事件冒泡. 方法一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...
- Qt---Xml文件解析
本文我们通过一个读取Xml文件的小例子来学习QXmlStreamReader. Xml 简介 Xml的全称是可扩展标记语言(EXtensible Markup Language),同HTML一样是一种 ...