CSS垂直居中的四种方法
写在前面的话
最近在Stack Overflow上看到 一个不错的回答 ,以下是我对其的总结,分享给大家。
垂直居中的四种方法
①基础的方法
设置父元素的line-height等于height,这种方法只适用于对一行文字进行垂直居中对齐
<div style="width: 300px; height: 300px; line-height: 300px; background: #FF6600; margin: 50px auto;">
<p> 设置父元素line-height = height </p>
</div>
②使用vertical-align:middle
这是另一种垂直居中对齐的方法,适用于单行文本和多行文本,但它仍然需要一个高度固定的父元素盒子。
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
下面是样式表
div {
width: 250px;
height: 100px;
line-height: 100px;
text-align: center;
background: #bbbbbb;
} span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
③模拟table display
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
下面是样式表
div {
display: table;
width: 250px;
height: 100px;
text-align: center;
} span {
display: table-cell;
vertical-align: middle;
}
这是另外一种垂直居中对齐的方法,但是它可能不能在老的浏览器中实现(IE7以下)
④使用绝对定位
这种方法使用绝对定位,并设置top、bottom、left、right都为0,在Smashing Magazine的文章中描述了更多的细节。
<div class="outer">
<div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
下面是样式表
div.outer{
position: relative;
width: 500px;
height: 500px;
background: #bbbbbb;
} div.inner {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top:; left:; bottom:; right:;
background: #FF6600;
}
效果图
结尾
如果有更多垂直居中的方法,希望能交流学习以下,在此感谢。
CSS垂直居中的四种方法的更多相关文章
- CSS垂直居中的8种方法
CSS垂直居中的8种方法 1.通过verticle-align:middle实现CSS垂直居中. 通过vertical-align:middle实现CSS垂直居中是最常使用的方法,但是有一点需要格外注 ...
- 完美实现CSS垂直居中的11种方法
在做前端项目时CSS的水平居中我们经常使用,但有时还会用到CSS垂直居中,对于小白来说这个就有些难度了,下面看一下我是如何实现的 本人前端小白,正在做一个小程序开发的项目,css样式调整搞的头都大了. ...
- HTML引入CSS样式的四种方法
在HTML中引入CSS的方法主要有四种,它们分别是行内式.内嵌式.链接式和导入式. 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐 ...
- css布局------块元素水平垂直居中的四种方法
HTML <div class="parent answer-1"> <div></div></div> CSS .parent { ...
- 解决CSS垂直居中的几种方法(基于绝对定位,基于视口单位,Flexbox方法)
在CSS中对元素进行水平居中是非常简单的:如果它是一个行内元素,就对它的父元素应用 text-align: center ;如果它是一个块级元素,就对它自身应用 margin: auto.然而如果要对 ...
- 纯CSS垂直居中的四种解决方案
总结了几种解决方法 但也不是说除了我说的就没有其他方法了 第一个.利用flex布局 代码: 效果: 第二个.利用transform 的 translate属性 代码: 效果: 第三个.使用伪类::af ...
- 让一个小div在另一个大div里面 垂直居中的四种方法
方法一 .parent { width:800px; height:500px; border:2px solid #000; position:relative; } .child { width: ...
- 顽石系列:CSS实现垂直居中的五种方法
顽石系列:CSS实现垂直居中的五种方法 在开发过程中,我们可能沿用或者试探性地去使用某种方法实现元素居中,但是对各种居中方法的以及使用场景很不清晰.参考的内容链接大概如下: 行内元素:https:// ...
- css如何实现垂直居中(5种方法)
css如何实现垂直居中(5种方法) 一.总结 一句话总结:行内只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了. 块的话可以尝试 margin:auto: ...
随机推荐
- docker 安装 redis
docker拉去镜像以及配置生成容器的步骤几乎和之前的nginx安装一样,直接写下面的命令了 1. docker pull redis 2. docker run -p 6379:6379 -v /U ...
- nandflash之基本特性
nandflash作为嵌入式中的”磁盘”, 被广泛的应用, 以(K9F2G08U0B)为例,其他型号都差不多 nandflash的结构 nandflash的结构有页(page), block(块)的概 ...
- GI缓存
GI缓存 设置 属性 最大高速缓存大小(GB) 使用滑块设置最大GI缓存文件夹大小.只要可能,GI缓存文件夹将保持在此大小以下.定期删除未使用的文件以创建更多空间.这是由编辑器自动执行,不需要你做任何 ...
- C++_函数3-引用变量与函数的默认参数
引用变量 C++新增了一种复合类型——引用变量. 引用是已定义的变量的别名.例如将twain作为clement变量的引用,则可以交替使用twain和clement来表示该变量. 引用变量的主要用途:用 ...
- 那些熟悉又陌生的 css2、css3 样式,持续复习
initial关键字: 除了 Internet Explorer,其他的主流浏览器都支持 initial 关键字. Opera 15 之前的版本不支持 initial 关键字. initial ...
- HDU - 1525 博弈 暴力分析
先来看看比较显然的几个局面 (a,0) 先手必败 (a,a) 先手必胜 (a,ak) 先手必胜 (a,ak+r),k>1 先手必胜,因为先手有主动权把(a,r)让给后手或留给自己 对于开局(a, ...
- P1077
f[i][j]:i种花放j盆的方案数 #include<bits/stdc++.h> using namespace std; const int maxn = 3e2+11; const ...
- [转] Spring Boot实战之Filter实现使用JWT进行接口认证
[From] http://blog.csdn.net/sun_t89/article/details/51923017 Spring Boot实战之Filter实现使用JWT进行接口认证 jwt(j ...
- pip安装时的异常,找不到lib2to3\\Grammar.txt
[From] http://jahu.iteye.com/blog/2353325 异常 : [Errno 2] No such file or directory: 'd:\\python\\pyt ...
- Putty使用帐号和密码的自动登录
Putty使用ssh key做验证登陆是最方便的,不用密码.如果不想做key exchange,只是单纯想保存帐号密码做自动登陆,可以借助bat文件的方式如下,其中MyServer是已经保存了的ses ...