CSS布局-垂直居中问题
在前端页面的布局方面,很多时候需要用到垂直居中,如果父集元素或子元素的高度是固定的那么垂直居中可以用line-height或者定位 top:50%;margin-top:- height/2 px;实现,那么如果父元素的高度和子元素的高度都不是固定值呢?
下面就总结一下使用css进行垂直居中布局的方法及使用环境。最好用的在最后。
html 使用如下:
<div class="parent"> <div class="child"> </div> </div>
1.父元素高度与子元素高度差值为固定值,对父元素使用padding使子元素居中
当父元素与子元素差值为固定值 H px 时,可以对父元素使用上下边的padding:H/2 px; 把子元素居中。
.parent{
width:200px;
height:auto;
padding:50px 0;
background-color: #13B202;
}
.child{
width: 40px;height: 40px;
margin:0 auto;
background-color: #000;
}
效果如下:
2. 父集高度为固定值,父集使用 line-height ,子集使用 display:inline-box ;
对父元素使用line-height:父集的高度;
由于line-height只对行元素有效果,所以改变子元素的display属性为inline-block,这样,行元素即可以有行元素属性,又能够像块元素一样设置宽高。
最后对子元素设置vertical-align: middle; 使其在行高内垂直居中,这样居中布局就实现了。
.parent{
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
background-color: #13B202;
}
.child{
display: inline-block;
width: 40px;height: 40px;
vertical-align: middle;
background-color: #000;
}
效果如下:
3.子元素高度固定,如果需要横向居中,子元素宽度也需固定,对子集使用定位 使其居中。
当子元素 的高度固定,无论父元素高度如何变化,子元素都可以通过 top:50%; margin-top: - 子元素高度/2 px ;使其垂直居中,这种一般用于父集高度不固定,会随着屏幕高度或者其他因素变化的情况使用,例如弹窗的垂直居中。对于水平方向的居中也一样,使用left:50%;margin-left:-子元素宽度/2 px ;
.parent{
position: relative;
width: 100%;
height: 100%;
background-color: #13B202;
}
.child{
position: absolute;
left: 50%;
top: 50%;
width: 40px;
height: 40px;
margin-left: -20px;
margin-top: -20px;
background-color: #000;
}
效果如下:
4. 父元素高度不固定,子元素高度也不固定 。
这种情况下上面列出的都不能使用,当遇到这种情况时确实很让人头疼,不知如何是好,那么使用css3的 box-align 和 box-pack 进行水平居中,使用align-items进行垂直居中。
这种情况下,无论父元素和子元素宽高如何变化,子元素都能够保持水平和垂直居中显示。唯一不足之处就是对于不支持CSS3的浏览器不能使用。
.parent{
width: 200px;
height: 200px;
background-color: #13B202;
display: flex;
display: -webkit-flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.child{
width: 40px;
height: 40px;
background-color: #000;
}
效果如下:
5. 使用定位 和 css3 的 transform 属性, 对.child 定位 left: 50%; top: 50%; transform: translate(-50%,-50%);
无论父级和子集的宽高如何变化,它都能实时居中,吼吼吼,效果图就不放了哈哈哈~
CSS布局-垂直居中问题的更多相关文章
- css布局 - 垂直居中布局的一百种实现方式(更新中...)
首先将垂直居中的现象和实现方式两大方向细分类如下: 接下来逐条累加不同情况下的垂直居中实现. 目录: 一.父元素高度固定时,单行文本 | 图片的垂直居中 1. line-height行高简单粗暴实现法 ...
- css布局--垂直居中
1. 使用table-cell和vertical-align实现垂直居中 html <div class="parent">使用table-cell和vertical- ...
- CSS布局中的水平垂直居中
CSS布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...
- Flexbox制作CSS布局实现水平垂直居中
Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head> & ...
- CSS布局之-水平垂直居中
对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.另外,文中的css都是用less书写的,如果看不懂less,可以把我给的 ...
- 解读 CSS 布局之水平垂直居中
对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方 ...
- 还在为垂直居中苦恼?CSS 布局利器 flexbox 轻轻松松帮你搞定
传统的 CSS 布局方式是基于盒模型(它是根据盒子与父盒子以及兄弟盒子的关系确定大小和位置的算法),实现时依赖于 block, inline, table, position, float 这些属性, ...
- CSS布局:元素垂直居中
CSS布局之元素垂直居中 本文将依次介绍在不同条件下实现垂直居中的多种方法及简单原理 Tip:下文中说的适用场景只是举了几个简单的例子方便读者理解.实际应用场景太复杂,生搬硬套容易出错.最重要的是掌握 ...
- CSS布局:元素水平垂直居中
CSS布局:元素水平垂直居中 本文将依次介绍在不同条件下实现水平垂直居中的多种方法 水平垂直居中是在写网页时经常会用到的需求,在上两篇博客中,分别介绍了水平居中和垂直居中的方法.本文的水平垂直居中就是 ...
随机推荐
- 13 tcp3次握手 4次释放 mac和ip 访问百度的过程
1.mac地址和ip地址的不同 (传棒棒糖) 需求:192.168.1.1 ping 192.168.2.1 1):获取默认的网关mac地址 2)寻找下一个网关的mac地址 3)mac地址在变,寻找 ...
- 海思NB-IOT的SDK函数使用说明
1. 查询当前AT指令是否正在处理中 while(get_at_cmd_in_progress() == false); 2. 信号量发送函数 (, osNoWait); 3. 信号量接收函数 if( ...
- 获取文件mimes
<?php /* * Copyright 2010-2013 Amazon.com, Inc. or its affiliates. All Rights Reserved. * * Licen ...
- 【JUC源码解析】Semaphore
简介 Semaphore(信号量),概念上讲,一个信号量持有一组许可(permits). 概述 线程可调用它的acquire()方法获取一个许可,不成功则阻塞:调用release()方法来归还一个许可 ...
- 【excle基础】如何去掉excel某一列中的字段的空格
如图所示,想要去掉A列的空格: 查找空格,全部替换
- localhost/127.0.0.1/本机IP的区别以及端口号
端口号: http请求默认的端口是:80 PHPstudy中的端口号: Apache服务器的端口是:80 MySQL数据库的端口是:3306 PHP项目端口是:9000 禅道中的端口号: Apache ...
- TCP/IP 网路基础
一.引子 TCP/IP是"Transmission Control Protocol/Internet Protocol"的简写,翻译成中文为传输控制协议/互联网网 ...
- Unity3D之AR开发(二)
上一篇给大家介绍了高通AR的使用,接下来给大家分享一下EasyAR EasyAR引擎简介 EasyAR是做好用的且免费的增强现实(Augmented Reality)引擎,EasyAR为Unity开发 ...
- Python函数标注
Python函数标注 是关于用户自定义函数中使用的类型的完全可选元数据信息. 函数标注 以Python字典的形式存放在函数的 __annotations__ 属性中,并且不会影响函数的任何其他部分. ...
- 413. Reverse Integer【LintCode java】
Description Reverse digits of an integer. Returns 0 when the reversed integer overflows (signed 32-b ...