CSS实现元素水平/垂直居中的方法
首先,我们来了解水平居中,它有很多种方法,我们暂时先来了解其中的几种:
1. 在实现方案中,我们最熟悉的莫过于给元素定义一个宽度,然后使用margin:
1
2
3
4
|
body{ width : 960px ; margin : 0 auto ; } |
这个是当我们的定义元素的宽度时显现的,如果我们不能定义宽度时,该怎么办呢?
2. 我们对于定位也是常用的,在这里当然也可以采用定位的方法来实现:
1
2
3
4
|
body{ position : absolute ; left : 50% ; } |
3. 既然定位可以,那浮动也是可以的:
1
2
3
4
|
body{ float : left ; right : 50% ; } |
4. 对于几个元素同时居中在一条线上:
1
2
3
|
body{ vertical-align : middle ; } |
5. 利用table:
1
2
3
4
5
6
|
ul{ display :table; } ul li{ display : table-cell ; } |
6. 还可以使用inline-block来实现,但要使用这个就得在其父元素上设置text-align.如下:
1
2
3
4
5
6
|
body{ text-align : center ; } .content{ display :inline- block ; } |
实现垂直居中的四种方法:
1. 只能是单行文本居中(可适用于所有浏览器):
1
2
3
4
|
.content{ height : 100px ; line-height : 100px ; } |
2. 跟水平居中一样,垂直也可以用定位的方法:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
.content{ position : absolute ; top : 0 ; bottom : 0 ; left : 0 ; right : 0 ; margin : auto ; } 或者 .content{ position : absolute ; top : 50% ; } |
定位的方法,它的缺点是当没有足够的空间时,元素会消失。
3. 对此,浮动也是可以的:
1
2
3
4
5
6
7
8
9
10
|
.content{ float : left ; top : 50% ; margin-bottom : -120px ; } .footer{ clear : both ; height : 240px ; position : relative ; } |
对于浮动,我们需要在之后清除,并显示在中间。
4. 也可以使用vertical-align属性:
1
2
3
4
|
.content{ display : table-cell ; vertical-align : middle ; } |
这种方法可以随意改变元素高度,但在IE8中无效。
现在来看个div模块在屏幕中居中的例子:
1
2
3
4
5
|
position : absolute ; top : 50% ; left : 50% ; //上下移动屏幕的 50% margin : auto ; -webkit-transform: translate( -50% , -50% ); //减去自身的 50% (多移动的) -ms-transform: translate( -50% , -50% ); transform: translate( -50% , -50% ); |
这个基本可以不确定宽高的模块居中,但是在低版本的浏览器中可能出现问题,现在还没测试过,但是主流的都是可以的!
CSS实现元素水平/垂直居中的方法的更多相关文章
- css中元素水平垂直居中4种方法介绍
table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...
- css 实现元素水平垂直居中总结5中方法
个人总结,如有错误请指出,有好的建议请留言.o(^▽^)o 一.margin:0 auto:text-align:center:line-height方法 <div id="divAu ...
- CSS元素水平垂直居中的方法
1. 元素水平居中 1.1 设置父元素的属性 text-align: center; 说明:此属性只针对父元素的子元素为内联元素时有效,比如:img,input,select,button等(行内 ...
- CSS实现元素水平垂直居中—喜欢对称美,这病没得治
[TOC] 在CSS中对元素进行水平居中是非常简单的:如果它是一个行内元素,就对它的父元素应用text-align:center;如果它是一个块级元素,就对它自身应用margin:auto.然而要对一 ...
- css:元素水平垂直居中的多种方式
CSS元素(文本.图片)水平垂直居中方法 1.text-align:center; 2.margin:0 auto; 3.display:inline-block; + text-align:ce ...
- css 常用的绝对定位元素水平垂直居中的方法
两种方法都能够实现: 1. div { height:80%; /*一定要设置高度*/ overflow:hidden;/*建议设置*/ margin: auto; position: absolut ...
- css实现块级元素水平垂直居中的方法?
父级给相对定位,子级给绝对定位,margin设置为auto,上下左右值设为0. 父级给相对定位,子级给绝对定位,设置left和top为50%,再向左和向上移动负的子级一半. 父级设置display:f ...
- CSS实现元素水平垂直居中
我们知道,实现元素的水平居中比较简单,在设置了宽度后,设置左右margin为auto就可以. 但是如何设置元素垂直居中呢? 当然,对于单行的文字,可以通过设置line-height来解决, 可以对于一 ...
- css控制元素 水平垂直居中
控制元素居中核心代码为 position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; css: /* 容器 */ .w ...
随机推荐
- C#使用Quartz.NET详细讲解
Quartz.NET是一个开源的作业调度框架,是OpenSymphony 的 Quartz API的.NET移植,它用C#写成,可用于winform和asp.net应用中.它提供了巨大的灵活性而不牺牲 ...
- Linux设置Memcached开机启动
Memcached开机启动方式 方法一: 在 /etc/rc.d/rc.local 文件中追加启动命令 /usr/local/memcached/bin/memcached -u root -d - ...
- 商品库存“存取设计”,MySQL事务、表锁、行锁
MySQL 使用 SELECT ... FOR UPDATE 做事务写入前的确认 以MySQL 的InnoDB 为例,预设的 Tansaction isolation level 为 REPEATA ...
- word20161206
D-channel / D 信道 DACL, discretionary access control list / 自由访问控制列表 daily backup / 每日备份 Data Communi ...
- composer 安装提示 PHP Warning: readfile(): SSL operation failed with code 1
这是php设置openssl 没有指定cacert.pem (证书) 第一步:下载 cacert.pem 文件下载地址 https://curl.haxx.se/docs/caextract.html ...
- PE440
一些证明,推荐复制入atom观看 首先我们考虑这个T(n)是什么,我们可以列出递归式: (definition:T) T(0) = 1 T(1) = 10 T(n) = 10*T(n-1) + T(n ...
- wampServer图标为橙色无法启动原因之一
前段时间,自己在本地做了一个WordPress的网站,利用wampserver配置的,后来突然无法启动了. 经过仔细查找发现是因为之前装了sql server,导致wampServer无法启动,那么怎 ...
- php实验四
实验四 1.创建一个Person类,Person中包含三个属性name,age,wealth,分别设置为public,private,protected,再定义Person类的子类Student. 2 ...
- day3
程序1: 实现简单的shell sed替换功能 ]new = sys.argv[]file_name = sys.argv[]tmp_file ="tmpfile"open(tmp ...
- jQuery Mobile学习笔记
1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) ...