css居中的几种方式
居中分水平和垂直两种，使用的频度也算是很高，下面分情况来讨论一下几种常用的实现方式。
欢迎指正文中的错误，同时如果有学习到新的方式也会更新在后面，也方便以后温故知新。
1.margin
这种方式只能实现固定宽度的块级元素水平居中，如果该元素没有设置宽度或者不是块级元素，则不会生效。
/*以div元素为例*/
div{
width: 100px;
height: 100px;
margin: auto; /*或者margin: 0 auto;*/
}
2.line-height
将单行文字line-height值设置为其父元素高度可以实现该行文字的垂直居中，局限也很明显。
<div id='container'>
<p id='content'>文字内容</p>
</div>
#container{
height: 30px;
}
#content{
line-height: 30px;
}
3.表格
如果你使用表格的话，那么可以利用td元素的align:center和valign:middle属性轻易的做到水平和垂直居中，但是考虑到现在表格布局的使用频率已经很低了，实用性其实并不强。
<table>
<tr>
<td width='200px' height='200px' align='center' valign='middle'>
<!-- 子元素 -->
</td>
</tr>
</table>
4.display: table-cell
由于单元格可以轻易的实现水平和垂直居中，所以可以把父元素容器模拟成单元格元素，通过样式text-align:center以及vertical-align:middle来达到一样的效果。但是要注意的是text-align:center只能使非块级子元素水平居中而对块级子元素无效。
<div id="table-cel">
<div></div>
</div>
#table{
display: table-cell;
width: 200px;
height: 200px;
vertical-align: middle;
text-align: center;
}
5.绝对定位居中
这个方法使用的相对也较多，但是需要子元素有固定的宽高，不多说直接上代码。
<body>
<div></div>
</body>
html,
body{
width: 100%;
height: 100%;
}
body{
position: relative;
}
body>div{
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
/*此时的元素并不是居中的，向右偏了一半的宽度，向下偏了一半的高度*/
/*所以要使用margin把元素拉回来*/
margin: -50px 0 0 -50px;
}
6.translate(-50%, -50%)
这个方法比较厉害了，其实可以算是前面绝对定位方法的改良版。之前的方法只能使固定宽高的元素居中，但是使用transform: translate(-50%, -50%);可以使不固定高宽的元素达到居中的效果。因为translate属性的百分比值是根据它本身而非父元素，下面看代码：
<div id="father">
<div id="child"></div>
</div>
#father{
width: 200px;
height: 200px;
position: relative;
}
#child{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
}
css居中的几种方式的更多相关文章
- CSS居中的几种方式总结
1.水平居中的 margin:0 auto; 这个是用于子元素上的,前提是不受float影响 <style type="text/css"> .box{ width: ...
- 前端基础问题：CSS居中的几种方式
水平居中 (1)内联元素: text-align: center; 利用 text-align: center :可以实现在块级元素内部的内联元素水平居中. 如果一行中有多个块级元素,可以通过设置块级 ...
- 前端js,css文件合并三种方式,bat命令
前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...
- HTML 引用Css样式的四种方式
不才,只知道HTML引用CSS样式有四种方式,内部引用和外部引用各两种,因为老是忘记细节,记下了随时翻阅亦可方便如我般的初学者 内部引用方式1: 直接在标签内用 style 引用,如: <div ...
- 原生js更改css样式的两种方式
下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3 &quo ...
- python 中增加css样式的三种方式
增加css样式的三种方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- 【javascript】原生js更改css样式的两种方式
下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3 &quo ...
- 我给女朋友讲编程CSS系列(1) –添加CSS样式的3种方式及样式表的优先权
如果说,原生态就是美,那么,我们就没有必要穿衣打扮. 网页是什么? 说白了,网页就是一堆[html标签]有序的搭配,让[CSS属性值]整整容,请[Javascript语言]处理一下事件. 一个人的整容 ...
- HTML与CSS结合的四种方式
HTML与CSS结合的四种方式: 方式一:每个标签加一个属性: 例如:<div style="background-color:red; color: green"> ...
随机推荐
- C++11变长参数模板
[C++11变长参数模板] C++03只有固定模板参数.C++11 加入新的表示法,允许任意个数.任意类别的模板参数,不必在定义时将参数的个数固定. 实参的个数也可以是 0,所以 tuple<& ...
- IMAQdx和IMAQ
NI-IMAQdx driver software gives you the ability to acquire images with IEEE 1394 and GigE Vision cam ...
- qq邮箱发送
454 Authentication failed, please open smtp flag first!用QQ邮箱测试报错 我用QQ邮箱测试javamail发送邮件的功能,用户名密码设置正确,却 ...
- C# 运用params修饰符来实现变长参数传递
一般来说,参数个数都是固定的,定义为集群类型的参数可以实现可变数目参数的目的,但是.NET提供了更灵活的机制来实现可变数目参数,这就是使用params修饰符.可变数目参数的好处就是在某些情况下可以方便 ...
- IP报文解析及基于IP 数据包的洪水攻击
版本(4bit) 报头长度(4bit) 优先级和服务类型(8bit) 总长度(16bit) 标识(16bit) 标志(3bit) 分段偏移(13bit) 存活期(8bit) 协议(8bit) 报头校验 ...
- 新唐M0 ISP下载要点
http://blog.csdn.net/rejoice818/article/details/7736029 一.注意:官方光盘内“Software Utilities”目录下,可找到ICP或ISP ...
- PPAS上运行pg_dump经过
目前我有两台机器, 分别已经安装了PPAS9.1,安装后建立了OS系统用户enterprisedb和数据库用户enterprisedb. 机器1:master 192.168.10.88 机器2: ...
- DAG成员服务器还原
DAG成员服务器 exmb02 已损坏: 1.使用 Get-MailboxDatabase cmdlet 为要恢复的服务器上的任何邮箱数据库副本检索所有重播延迟和截断延迟设置: Get-Mailb ...
- MySQL通配符过滤
在WHERE后使用LIKE操作符能够进行通配符过滤: products表例如以下: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGl1eWluZ18xM ...
- CentOS 6.4安装本地yum源，并安装X Window System
1.为DVD创建一个挂载目录 [root@localhost ~]# mkdir /media/CentOS 2.在Linux下挂载CentOS DVD(虚拟机挂载DVD不说了,应该都会) [root ...