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"> ...
随机推荐
- jQuery - Chaining
jQuery - Chaining @(编程) 通过 jQuery,您可以把动作/方法链接起来. Chaining 允许我们在一条语句中允许多个 jQuery 方法(在相同的元素上). jQuery ...
- 【全面完美方案】iPhone 4S WiFi变灰 DIY修复方式
这是我在一位台湾网友usaretama发表的一篇帖子中看到的,原帖我发表在维维网 如果你有WiFi开关变灰不能切换.WiFi遇到搜不到AP或搜到了连不上,那您就要注意这篇了. 家人的 iPhone 4 ...
- 在Ribbon中，中文换行位置不对怎么办
在Ribbon代码的编写时,关于UI上面设置Button的中文字,经常会出现不想换行的地方换行的情况,比如下图: 我如果希望中国一行,然后只有一行怎么办呢. 网上流传的很多方法就是直接加空格,但是很遗 ...
- 图片 文字 input等垂直居中对齐
span::before { width:100%; height:1px; font-size:1em; content:''; background:#fff; position:absolute ...
- jsp与El，jstl知识点总结归纳
jsp与El,jstl知识点总结归纳 jsp部分 一.jsp的三大指令 page ,include,taglib 1.jsp中的page指令 <% page %>-设置jsp 例如: &l ...
- Android平台NDK编程
转自:http://blog.csdn.net/wangbin_jxust/article/details/37389383 之前在进行cocos2dx开发时,已经详细介绍了如何将win32的c++代 ...
- jquery的匿名函数研究
jQuery片段: ? 1 2 3 ( function (){ //这里忽略jQuery所有实现 })(); 半年前初次接触jQuery的时候,我也像其他人一样很兴奋地想看看源码是什么样的.然而,在 ...
- 关于Javascript的内存泄漏问题的整理稿
写了好长时间javascript小功能模块,从来没有关注过内存泄漏问题.记得以前写C++程序的时候,内存泄漏是个严重的问题,我想是时候关注一下了.网上找了篇文章,Mark一下.原文地址:http:// ...
- VK Cup 2012 Qualification Round 1 C. Cd and pwd commands 模拟
C. Cd and pwd commands Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/problemset ...
- C# 6与VB 12即将加入模式匹配
又有一种源自于函数式编程语言中的概念加入了C#和VB的阵营,这就是被称为模式匹配(Pattern Matching)的特性.初看上去,模式匹配的作用类似于一段switch/select语句块,但它的功 ...