css垂直居中的六种方法
来源:互联网 发布:大数据用什么软件 编辑:程序博客网 时间:2024/06/01 07:50
利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可。本文收集了六种利用css进行元素的垂直居中的方法,每一种适用于不同的情况,在实际的使用过程中选择某一种方法即可。
1.设置行高
适用:单行文本垂直居中,demo代码:
html
123<div id="parent"><div id="child">Text here</div></div>css
123#child {line-height: 200px;}垂直居中一张图片,代码如下
html
123<div id="parent"><img src="image.png" alt="" /></div>css
123456#parent {line-height: 200px;}#parent img {vertical-align: middle;}2.设置table方式,不推荐使用
通用,demo
代码:
html
123<div id="parent"><div id="child">Content here</div></div>css
12345#parent {display: table;}#child {display: table-cell;vertical-align: middle;}低版本 IE fix bug:
123#child {display: inline-block;}3.绝对定位并设置负值外边距
适用:块级元素,demo
代码:
html
123<div id="parent"><div id="child">Content here</div></div>css
123456789#parent {position: relative;}#child {position: absolute;top: 50%;left: 50%;height: 30%;width: 50%;margin: -15% 0 0 -25%;}4.绝对定位并垂直延伸
适用:通用,但在IE版本低于7时不能正常工作,demo
代码:
html
123<div id="parent"><div id="child">Content here</div></div>css
1234567891011#parent {position: relative;}#child {position: absolute;top: 0;bottom: 0;left: 0;right: 0;width: 50%;height: 30%;margin: auto;}5..设置相同的顶部和底部内边距
适用:通用,demo
代码:
html
123<div id="parent"><div id="child">Content here</div></div>css
123456#parent {padding: 5% 0;}#child {padding: 10% 0;}6.浮动div方法
适用:通用,demo
代码:
html
1234<div id="parent"><div id="floater"></div><div id="child">Content here</div></div>css
1234567891011#parent {height: 250px;}#floater {float: left;height: 50%;width: 100%;margin-bottom: -50px;}#child {clear: both;height: 100px;}
0 0
- css垂直居中的六种方法
- css垂直居中的六中方法
- div 垂直居中的六种方法
- CSS垂直居中的几种方法
- css垂直居中的几种方法
- css垂直居中的方法
- css垂直居中的方法
- CSS垂直居中方法
- css的几种垂直居中的方法
- CSS教程:div垂直居中的N种方法
- CSS垂直居中网页布局实现的5种方法
- 实现CSS垂直居中的两种方法
- CSS实现垂直居中的几种方法
- CSS 元素垂直居中的 6种方法
- CSS教程:div垂直居中的N种方法[转]
- CSS实现垂直居中的5种方法
- CSS教程:div垂直居中的N种方法[转]
- CSS实现垂直居中的5种方法
- (学习总结)鸟哥基础篇第三版:第二十章
- [leetCode刷题笔记]2017.02.18
- 菜狗的C++ primer读书笔记:第二章 变量和基本类型
- 拓扑结构相同子树练习题
- BZOJ3514: Codechef MARCH14 GERALD07加强版
- css垂直居中的六种方法
- Codeforces 767A Snacktower
- python位运算纪录
- 746B Decoding
- asp.net core mvc剖析:KestrelServer
- 多项式输出
- java中的访问权限的修饰符09
- Java基础学习-----第一章Java语言概述
- 乘车