关于水平垂直居中，这是一个很简单的问题，但是很多时候，往往简单的东西，反而做不出来。这就是基础不扎实的缘故吧，我参照一些资料，总结了水平垂直居中的几种方法如下：

1 .文字水平垂直居中

这个比较简单，只要分别设置水平集中和垂直居中即可

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style lang="">

         div{

             width:500px;

             height:100px;

             background: #ccc;

             text-align:center;

             line-height: 100px;

         }

     </style>

 </head>

 <body>

     <div>

         I am huanying2015!

     </div>

 </body>

 </html>

2.水平垂直居中

2.1 把父元素设置成相对定位，子元素设置成绝对定位，margin为auto,left/right/top/bottom都分别设置为0；（备注：如果不是图片，是其他子元素的话，要设定子元素的宽和高，否则显示不出来，行内元素（inline）是没有宽高的，会聚集到最中央的一点去）

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style lang="">

         .box{

             width:500px;

             height:500px;

             background: #ccc;

             margin:30px auto;

             position:relative;

         }

         img{

             position:absolute;

             margin:auto;

             left:0;

             right:0;

             top:0;

             bottom: 0;

         }

     </style>

 </head>

 <body>

     <div class="box">

         <img src="picture.jpg" alt="">

     </div>

 </body>

 </html>

分析：子元素的上下左右（top/bottom/left/right）都设置为0，margin设置为auto;从四个方向进行定位，可以形象的看作是从四面拉扯，最终在中间进行平衡~~，形象一点，可以叫做四面拉扯法或者四点定位法

2.2  子元素居中，从原理上进行定位：

父元素设置position为relative;元素设置为absolute;要居中定位，实际上是要找子元素的起始点的位置，也就是左上角的点位置；一个元素，起始点定了，加上它本身的高和宽，这个元素就定型了；父元素的width/height，相当于子元素的left/top;子元素在父素中的定位，实际上就是本身margin的变化，这样，就可以找到子元素的起始点了：

子y = top*50% - margin-top*50%;   子x = left*50%- margin-left*50%；代码表示如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style lang="">

         .box{

             width:500px;

             height:500px;

             background: #ccc;

             margin:30px auto;

             position:relative;

         }

         .child{

             position:absolute;

             width:200px;

             height:200px;

             top:50%;

             left:50%;

             margin-left:-100px;

             margin-top:-100px;

             background: #666;

         }

     </style>

 </head>

 <body>

     <div class="box">

         <span class="child"></span>

     </div>

 </body>

 </html>

2.3  采用table的属性，将父元素设置display:table-cell;

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style lang="">

         .box{

             width:500px;

             height:500px;

             background: #ccc;

             display:table-cell;

             vertical-align:middle;

             text-align:center;

             margin:30px auto;

             position:relative;

         }

         .child{

             display:inline-block;

             width:200px;

             height:200px;

             background: #666;

         }

     </style>

 </head>

 <body>

     <div class="box">

         <span class="child"></span>

     </div>

 </body>

 </html>

2.4 采用盒子模型flex;

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style lang="">

         .box{

             width:500px;

             height:500px;

             background: #ccc;

             margin:30px auto;

             position:relative;

             display:flex;

             display:-webkit-flex;

             align-items:center;

             -webkit-align-items:center;

             justify-content:center;

         }

         .child{

             width:200px;

             height:200px;

             background: #666;

         }

     </style>

 </head>

 <body>

     <div class="box">

         <span class="child"></span>

     </div>

 </body>

 </html>

2.5  采用Css3 的 transform 的translate属性进行水平垂直居中：

 <!DOCTYPE html>

   <html lang="en">

   <head>

       <meta charset="UTF-8">

       <title>Document</title>

       <style lang="">

           .box{

               width:500px;

               height:500px;

              background: #ccc;

              margin:30px auto;

              position:relative;

          }

          .child{

              position:absolute;

              width:200px;

              height:200px;

              top:50%;

              left:50%;

              background: #666;

              -ms-transform: translate(-50%,-50%);

              -moz-transform: translate(-50%,-50%);

              -o-transform: translate(-50%,-50%);

              transform: translate(-50%,-50%);

          }

      </style>

  </head>

  <body>

      <div class="box">

          <span class="child"></span>

      </div>

  </body>

  </html>

运行结果：

css 文字和子元素水平垂直居中的更多相关文章

  1. CSS未知宽高元素水平垂直居中

    方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中优点:父元素(p ...

  2. CSS中怎么设置元素水平垂直居中？

    记录怎么使用text-align与vertical-align属性设置元素在容器中垂直居中对齐.text-align与vertical-align虽然都是设置元素内部对齐方式的,但两者的用法还是有略微 ...

  3. CSS多种方式实现元素水平垂直居中

    html结构: <div class="center">确定宽高水平垂直居中</div> <div class="center2" ...

  4. css实现块级元素水平垂直居中的方法？

    父级给相对定位,子级给绝对定位,margin设置为auto,上下左右值设为0. 父级给相对定位,子级给绝对定位,设置left和top为50%,再向左和向上移动负的子级一半. 父级设置display:f ...

  5. css 常用的绝对定位元素水平垂直居中的方法

    两种方法都能够实现: 1. div { height:80%; /*一定要设置高度*/ overflow:hidden;/*建议设置*/ margin: auto; position: absolut ...

  6. css 实现元素水平垂直居中总结5中方法

    个人总结,如有错误请指出,有好的建议请留言.o(^▽^)o 一.margin:0 auto:text-align:center:line-height方法 <div id="divAu ...

  7. CSS元素水平垂直居中方法总结（主要对大漠以及张鑫旭博客所述方法进行了归纳）

    本文主要是对主流居中方法进行了归纳,有些地方甚至就是把别人的代码直接复制过来的,没有什么自己的东西,除了大漠以及张鑫旭的方法外,还有来自司徒正美.怿飞博客的几个方法 以下方法,由于测试环境的原因,IE ...

  8. css进阶 04-如何让一个元素水平垂直居中？

    04-如何让一个元素水平垂直居中? #前言 老板的手机收到一个红包,为什么红包没居中? 如何让一个子元素在父容器里水平垂直居中?这个问题必考,在实战开发中,也应用得非常多. 你也许能顺手写出好几种实现 ...

  9. CSS实现文字和图片的水平垂直居中

    关于文字和图片的水平垂直居中,在前端界绝对算是一个老生常谈的问题了,尤其是垂直居中,什么千奇百怪的解法都能想的出来.下面我就总结一些比较常用的方法: 一.文本的水平垂直居中: 1.水平居中: 是不是很 ...

随机推荐

  1. 【java】聊聊java里的接口

    接口的概念 java中的接口用于描述类应该具备什么样的功能,而不给出具体的实现,一个类可以“实现”多个接口 [注意]接口不是类,而是对类的一组描述   还是让我们通过一个例子来看看接口如何运作吧!   ...

  2. Spring第一篇【介绍Spring、引入Spring、Spring六大模块】

    前言 前面已经学习了Struts2和Hibernate框架了.接下来学习的是Spring框架-本博文主要是引入Spring框架- Spring介绍 Spring诞生: 创建Spring的目的就是用来替 ...

  3. 《MySQL必知必会》[03] 表数据的增删改

    1.增:插入数据 INSERT关键字可以插入新的行到数据库表中: 插入完整的行 插入行的一部分 插入多行 插入某些查询的结果 基本的INSERT语句是: INSERT INTO R(A1, A2, . ...

  4. Apache Spark 2.2.0 中文文档 - 快速入门 | ApacheCN

    快速入门 使用 Spark Shell 进行交互式分析 基础 Dataset 上的更多操作 缓存 独立的应用 快速跳转 本教程提供了如何使用 Spark 的快速入门介绍.首先通过运行 Spark 交互 ...

  5. 关于sping quartz定时执行理解与思考

    转载请注明原创出处,谢谢! 一直以为自己理解spring quartz,忽然最近几天发现自己理解的不对,在4月18号的时候,我执行了一个spring quartz的计划如下: 1 0 0 */3 * ...

  6. Maven 整合strut与Hibernate，获取不到Session

    struts使用的是2.3.24 Hibernate使用的5.0.7 注意hebernate一定要在struts之前申明,不然容易出现500错误, <project xmlns="ht ...

  7. Javascript 中 ==(相等运算符) 和 ===(严格相等运算符) 区别

    在JS中,"==="叫做严格运算符,"=="叫做相等运算符. 它们的区别是相等运算符(==)比较两个值是否相等,严格相等运算符(===)比较它们是否为" ...

  8. 设计模式学习之“观察者模式” [C#]

    <深入浅出设计模式>学习笔记第二章 需求: 开发一套气象监测应用,如图: 气象站,目前有三种装置,温度.湿度和气压感应装置. WeatherData对象追踪气象站的数据,并更新到布告板,布 ...

  9. poj3070矩阵快速幂

    Fibonacci Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 7752   Accepted: 5501 Descrip ...

  10. 宝藏（树形DP）

      这道题目是十分考验思维的,n^2应该还是比较好想的,主要是如何转移根的问题.转移根,在我看来应该是树形dp最难的一部分了, 一般学会如何转移根,也就差不多考验通吃树形dp了. 下面转一转大佬链接: ...