居中分水平和垂直两种，使用的频度也算是很高，下面分情况来讨论一下几种常用的实现方式。

欢迎指正文中的错误，同时如果有学习到新的方式也会更新在后面，也方便以后温故知新。

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居中的几种方式的更多相关文章

  1. CSS居中的几种方式总结

    1.水平居中的 margin:0 auto; 这个是用于子元素上的,前提是不受float影响 <style type="text/css"> .box{ width: ...

  2. 前端基础问题：CSS居中的几种方式

    水平居中 (1)内联元素: text-align: center; 利用 text-align: center :可以实现在块级元素内部的内联元素水平居中. 如果一行中有多个块级元素,可以通过设置块级 ...

  3. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

  4. HTML 引用Css样式的四种方式

    不才,只知道HTML引用CSS样式有四种方式,内部引用和外部引用各两种,因为老是忘记细节,记下了随时翻阅亦可方便如我般的初学者 内部引用方式1: 直接在标签内用 style 引用,如: <div ...

  5. 原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  6. python 中增加css样式的三种方式

    增加css样式的三种方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  7. 【javascript】原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  8. 我给女朋友讲编程CSS系列(1) –添加CSS样式的3种方式及样式表的优先权

    如果说,原生态就是美,那么,我们就没有必要穿衣打扮. 网页是什么? 说白了,网页就是一堆[html标签]有序的搭配,让[CSS属性值]整整容,请[Javascript语言]处理一下事件. 一个人的整容 ...

  9. HTML与CSS结合的四种方式

    HTML与CSS结合的四种方式: 方式一:每个标签加一个属性: 例如:<div style="background-color:red; color: green"> ...

随机推荐

  1. USB枚举过程（1）

    总的过程 ① host检测到device,reset 获取设备描述符 host发获取设备描述符请求 ->setup ->data0 <-ack Divice 返回设备描述符 -> ...

  2. hdu 1199 Color the Ball

    http://acm.hdu.edu.cn/showproblem.php?pid=1199 Color the Ball Time Limit: 2000/1000 MS (Java/Others) ...

  3. True or False

    任何对象都可以被测试真值.用于if或while条件中或作为下面的布尔操作的操作数.以下值被视为假: None False 任何数值类型的零,例如,0.0.0.0j . 任何空序列,例如,". ...

  4. 第二次作业----自学c++的选择与计划

    1.选择慕课网进行学习的原因 由于本来寒假是打算学习java的(如上篇随笔所言),所以向之前已经自学的同学问如何找教学视频,他就向我推荐了慕课网,在看了几集java的教学视频之后觉得慕课网挺好用的,所 ...

  5. HDU1007最近点对（分治）

    http://acm.hdu.edu.cn/showproblem.php?pid=1007 直接见代码吧.不过这个是N*logN*logN的 尽管如此,我怎么感觉我的比他们的还快??? #inclu ...

  6. redis 重用命令

    一. set 1.smembers key 查看所有元素

  7. Apache Kafka：下一代分布式消息系统

    [http://www.infoq.com/cn/articles/apache-kafka/]分布式发布-订阅消息系统. Kafka是一种快速.可扩展的.设计内在就是分布式的,分区的和可复制的提交日 ...

  8. （剑指Offer）面试题14：调整数组顺序使奇数位于偶数前面

    题目: 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有的奇数位于数组的前半部分,所有的偶数位于位于数组的后半部分,并保证奇数和奇数,偶数和偶数之间的相对位置不变. 如果去掉约束条件: ...

  9. maven仓库介绍

    maven仓库介绍 http://juvenshun.iteye.com/blog/359256

  10. jquery视频展示 图片轮播

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...