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<& ...
- emWin(ucGUI)在PC机上模拟的按键响应多次解决办法 worldsing
emWin(ucgui) 在PC端的模拟器,默认的按键机制是"按抬都Msg",当在按下键盘时,会收到一个key值-1,在按键没有离开时一直维持,当按键松开时还发送一个key值-0的 ...
- IntegrityError错误
Python插入数据库提交失败,一直走IntegrityError错误,没打印错误信息(一定注意编码规范,记住打印错误信息),以为插不进去,弄了好久,最后打印了错误信息 (sqlite3.Integr ...
- poj3468A Simple Problem with Integers(线段树，在段更新时要注意)
Description You have N integers, A1, A2, ... , AN. You need to deal with two kinds of operations. On ...
- Oracle中decode方法的作用
DECODE(条件,值1,翻译值1,值2,翻译值2,...值n,翻译值n,缺省值) 该函数含义如下: IF 条件=值1 THEN RETURN (翻译值1) ELSIF 条件=值2 THEN ...
- .NET开发中的事务处理大比拼
本文转载:http://www.cnblogs.com/jhxk/articles/2696307.html http://liubaolongg.blog.163.com/blog/static/2 ...
- TCP连接（Time_Wait、Close_Wait）说明
修改Time_Wait和CLOSE_WAIT时间 修改Time_Wait参数的方法 (在服务端修改)Windows下在HKEY_LOCAL_MACHINE/SYSTEM/CurrentControlS ...
- Windows常用性能计数器总结
基础监控: Processor:% Processor Time CPU当前利用率,百分比 Memory:Available MBytes 当前可用内存,兆字节(虚拟内存不需要监控,只有当物理内存不够 ...
- JavaScript中伪协议 javascript:研究
将javascript代码添加到客户端的方法是把它放置在伪协议说明符javascript:后的URL中.这个特殊的协议类型声明了URL的主体是任意的javascript代码,它由javascript的 ...
- 手把手教你使用 Imagepro plus - 宏操作【转】
Imagepro plus操作5 – 提高测量效率的必须技术-宏操作(续) 星期三, 七月 7th, 2010 | 图像分析 | hbchendl | 浏览:897 请先参阅:Imagepro plu ...