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

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

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. axis1调用方式

    axis http://10.15.22.28/itfmgr/services/ITaxManagement?wsdl package com.isoftstone.core.service.impl ...

  2. 存量数据处理结果查询.txt

    请求报文:<?xml version="1.0" encoding="UTF-8"?><PDL><PDL-Head>< ...

  3. ADT-bundle

    eclipse 弹出 Version 1.4.2_03 of the JVM not suitable for this product.Version1.6or geeater is requir ...

  4. 固定分隔符字符串与数组互转及ArrayList与数组(Array)互转

    1.字符串转数组 这个相信多数人都会常用,string.split方法,分隔符可以为多个.详细信息参见MSDN string[] actionCfgs = _para.Split(new char[] ...

  5. maven仓库介绍

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

  6. MFC中关于子对话框中编辑框不能编辑的问题

    最近在用MFC写程序.发现子对话框中的编辑框不能编辑.具体问题是这样的: 我有一个对话框YhglDlg,创建了这个对话框的子对话框ZjyhxxDlg,子对话框的Style属性为Child,Border ...

  7. Windows Server 2012远程刷新客户端组策略，IE代理设置

    Windows Server 2012远程刷新客户端组策略: 1.PowerShell命令对单台计算机进行刷新: Invoke-GPUpdate -RandomDelayInMinutes 0 -Co ...

  8. Java面试试题

    第一,谈谈final, finally, finalize的区别.最常被问到. 第二,Anonymous Inner Class (匿名内部类) 是否可以extends(继承)其它类,是否可以impl ...

  9. git status对应中文名称

    git status显示出来的中文文档是一串字符码,不能正常识别 git config --global core.quotepath false 这一句代码就可以帮你

  10. 高斯混合和EM算法

    首先介绍高斯混合模型: 高斯混合模型是指具有以下形式的概率分布模型: 一般其他分布的混合模型用相应的概率密度代替(1)式中的高斯分布密度即可. 给定训练集,我们希望构建该数据联合分布 这里,其中是概率 ...