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: ...
随机推荐
- Reviewing notes 1.1 of Advanced algebra
♦Linear map Definition Linear map A linear map from vector space V to W over a field F is a function ...
- ML理论知识博文列表
一文弄懂神经网络中的反向传播法——BackPropagation:http://www.cnblogs.com/charlotte77/p/5629865.html 人脸识别图库:http://vis ...
- 5、Numpy处理数据
转载自:http://old.sebug.net/paper/books/scipydoc/numpy_intro.html#id9 2 NumPy-快速处理数据 标准安装的Python中用列表(li ...
- springcloud整合bus
bus的使用主要是配合springcloud config部分来一起使用,并没有单独使用 首先建立服务端: <dependency> <groupId>org.springfr ...
- window平台 php 安装 redis 扩展
1.使用phpinfo() 函数查看PHP的版本信息 <?php phpinfo(); ?> 查看扩展文件版本(特别注意以php版本的 architecture 是x86还是64为准,不能 ...
- 网站安装 https 证书
1.点击进入官网 数安时代 2.点击选择你需要的ssl 证书 3.点击进入选择 免费申请 ,填写你需要 安装 ssl 证书 的域名 4.根据你的需求选择,我这里选择的是 数安时代 ,接下来按照步骤操 ...
- 基于中间件的RBAC权限控制
RBAC 是什么 RBAC(Role-Based Access Control,基于角色的访问控制),就是用户通过角色与权限进行关联. 在 Django 中,权限就是用户对一个包含正则表达式 url ...
- Luogu P1436 棋盘分割 暴力DP
我的天,,,,,n=8,k<=15,,,这怕不是暴力DP+高维数组.... 开一个五维数组f[k][i][j][p][q]表示从(i,j)到(p,q)中分成k个矩形最小的平方和. 然后初始化时用 ...
- Oracle 序列(自增ID)
-- 创建序列CREATE SEQUENCE "JPADMIN"."SEQ_JP_BAS_USER_ID" MINVALUE 1 // 最小值MAXVALUE ...
- [jQuery] 在线引用地址
百度静态资源公共库: http://libs.baidu.com/jquery/1.9.1/jquery.js jQuery网站: http://code.jquery.com/jquery-1.9. ...