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"> ...
随机推荐
- PPPOE拨号演练
搭建PPPOE服务器,拓扑如下 PPP-Server配置如下: (config)#bba-group pppoe global (config-bba-group)#virtual-template ...
- cf754 A. Lesha and array splitting
应该是做麻烦了,一开始还没A(幸好上一次比赛水惨了) #include<bits/stdc++.h> #define lowbit(x) x&(-x) #define LL lon ...
- android ListView进阶
ListView 1.在android 开发中很多时候都要用到ListView的这个控件的,但用这个控件的时候会遇到一些问题,如在ListView中有Button按钮,就需要将按钮的监听事件给分离出来 ...
- C++ Vector 使用心得 [转]
标准库Vector类型 使用需要的头文件:#include <vector>Vector:Vector 是一个类模板.不是一种数据类型. Vector<int>是一种数据类型. ...
- 导入flash 逐帧动画
只要图片是一序列的,比如0001-0100,就可以使用导入素材功能,选择第一张图片,选中影片剪辑并编辑然后点击导入到舞台,然后FlashCS6工具就会问你,这是一序列图片,是否逐帧导入,点是,就ok了 ...
- java静态代理与动态代理简单分析
原创作品,可以转载,但是请标注出处地址http://www.cnblogs.com/V1haoge/p/5860749.html 1.动态代理(Dynamic Proxy) 代理分为静态代理和动态代理 ...
- Winform学习手册（目录）
一.基础: WINFORM学习笔记——创建Winform项目 WINFORM学习手册——TextBox.Lable.Button WINFORM学习笔记——窗体生命周期 WINFORM学习手册——对话 ...
- Codeforces Round #309 (Div. 2) C. Kyoya and Colored Balls 排列组合
C. Kyoya and Colored Balls Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contes ...
- CSS定位规则之BFC 你居然一直不知道的东西！！！！！
相关文档: http://blog.sina.com.cn/s/blog_877284510101jo5d.html http://www.cnblogs.com/dojo-lzz/p/3999013 ...
- .net 调用C++类库
事实上这一直是个非常无解的问题.最好的办法是将C++类库写成COM. 可是有时候往往不能这个做.那就仅仅有两种办法:转成C函数形式或者Manage C++封装. 下文就介绍了这两种方法. 原帖:htt ...