方法一：使用绝对定位

大家都知道margin:0 auto;能够实现水平居中，但却不知道margin:0 auto;也是可以实现垂直居中的；

给居中元素添加如下样式：

.Absolute-Center {

        border:2px solid red;

        height: 200px;

        margin: auto;

        position: absolute;

        top:; left:; bottom:; right:;

    }

缺点：内容容易溢出，建议使用overflow:auto;

方法二：负margin方法

给居中的div设置样式：

<style>

    * {

        margin: 0;

        padding: 0;

    }

    .Absolute-Center {

        width: 400px;

        height: 200px;

        background-color: pink;

        position: absolute;

        top: 50%;

        left: 50%;

        margin-top: -100px;

        margin-left: -200px;

    }

</style>

<body>

<div class="Absolute-Center">

</div>

</body>

方法三：css3的 transform 来实现

<style>

    * {

        margin: 0;

        padding: 0;

    }

    .mydiv {

        position: absolute;

        top: 50%;

        left: 50%;

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

        width: 300px;

        height: 200px;

    }

</style>

<body>

<div class="mydiv" style="border: 2px solid red;"></div>

</body>

http://blog.csdn.net/freshlover/article/details/11579669

重新整理部分如下：

CSS实现垂直水平居中的方法（至少写2种）

（1）      文本的水平垂直居中

使用：line-height  +  text-align: center

<div class=”wrap”>

文本的垂直水平居中

</div>

html,body{

margin: 0;

}

.wrap{

line-height: 400px;

text-align: center;

height: 400px;

font-size:36px;

}

（2）      使用margin: auto 方法实现div水平垂直居中

<div class=”wrap”>

<div class=”content”></div>

</div>

.wrap{

Position: relative;

width: 200px;

height: 300px;

border: 1px solid red;

}

.content{

Position: absolute;

width: 50%;

height: 50%;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

border: 1px solid red;

}

（3）      负margin方法

<div class=”wrap”>

<div class=”content”></div>

</div>

.wrap{

Position: relative;

width: 200px;

height: 300px;

border: 1px solid red;

}

.content{

Position: absolute;

width: 180px;

height: 260px;

top: 50%;

left: 50%;

margin-top: -130px;

margin-left: -90px;

border: 1px solid red;

}

（4）      让图片水平垂直居中，使用table-cell方法

<div class=”wrap”>

<img src=”tupian.png”/>

</div>

.wrap{

width: 200px;

height: 300px;

border: 1px solid red;

display:table-cell;

vertical-align: middle;

text-align:center;

}

img{

vertical-align:middle;

border: 1px solid red;

}

（5）      弹性盒子方法

<div class=”wrap”>

<div class=”content”></div>

</div>

.wrap{

width: 300px;

height: 200px;

border: 1px solid red;

display: -webkit-flex;

display: flex;

-webkit-align-items: center;

align-items: center;

-webkit-justify-content: center;

justify-content: center;

}

.content{

padding: 20px;

border: 1px solid red;

}

（6）      使用CSS3的transform：translate（-50%,-50%）; 或者

transform：translate3d（-50%,-50%,0）;

 

<div class=”wrap”>

<div class=”content”></div>

</div>

.wrap{

width: 300px;

height: 200px;

border: 1px solid red;

position: relative;

}

.content{

Position: absolute;

width: 160px;

height: 100px;

left: 50%;

right: 50%;

transform: translate(-50%,-50%);或者用3d旋转的也可以

}

css实现垂直水平居中的方法（个数不限）？的更多相关文章

  1. css实现垂直水平居中的方法

    html结构: <div class="box"> <div>垂直居中</div> </div> 方法1:display:flex ...

  2. css实现垂直水平居中的5种方法

    css实现垂直水平居中的5种方法 给父元素设置table-cell,text-align,vertical-align #big{ width: 200px; height: 200px; borde ...

  3. css图片垂直水平居中及放大(实现水平垂直居中的效果有哪些方法？）

    实现水平垂直居中方法有很多种: 一.万能法: 1.已知高度宽度元素的水平垂直居中,利用绝对定位和负边距实现. <style type="text/css"> .wrap ...

  4. CSS之垂直水平居中的背后

    最开始,我想说,这个体系有点大,我写的并不好.就当作是一个思路吧,虽然这个思路有点乱.几乎每一个实现方案的背后都是该属性及其组合的原理,每一个都要剖析其规范细节的话,这篇文章绝不会是这样的篇幅,所以每 ...

  5. css文本垂直水平居中

    一.单行文本居中 .content{ height:100px; line-height:100px; text-align:center; border:1px solid red; } 效果图 二 ...

  6. Css实现垂直水平居中的六种方法

    经常在项目中用到,今天总结了一下: 演示地址:http://codepen.io/anon/pen/xGdpOa 以下两个类为公共类,便于更好的显示效果,非核心代码 .common{ width: 6 ...

  7. css中设置div垂直水平居中的方法

    设置要水平垂直居中的div的position为absolute,left:50%;margin-left为负的这个元素宽度的一半,同理,top:50%;margin-top为负的这个元素的高度的一半. ...

  8. CSS之垂直水平居中方法

    //居中方法1 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 346px; height ...

  9. CSS实现垂直水平居中

    HTML结构: <div class="wrapper"> <div class="content"></div> < ...

随机推荐

  1. php通过phpize安装扩展

    //下载libevent扩展文件压缩包(在当前系统哪个目录下载随意) ~# wget http://pecl.php.net/get/libevent-0.1.0.tgz //解压文件 ~# tar ...

  2. CentOS7编译安装SVN(subversion1.9.7)

    参考连接0:http://www.programering.com/a/MDMzYDMwATg.html参考连接1:http://www.zsythink.net/archives/13180.系统信 ...

  3. laravel blog edit

    模板复制create的模板 主要修改的地方 <form action="{{ url('admin/article/'.$article->id) }}" method ...

  4. vuex 入坑篇

    Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 这个状态自管理应用包含 ...

  5. OO第二单元优化博客

    OO第二单元优化博客 第五次作业没有性能分,但是,我在这一单元的宗旨就是写一个日常生活中 最常见的那种电梯,所以第五次我没有写傻瓜电梯,而是直接写了个\(look\),和第六次基本相同. 总计一下lo ...

  6. 2017-12-26--mysql(5.6.15),linux下安装使用

    本文档的目的是,指导使用者安装.配置.还原所需要用到的mysql数据库.仅提供linux版本服务器的安装说明,且linux版本为64位的Centos6.4.同时,会提供的mysql安装包(MySQL- ...

  7. Swift ios应用开发实践

  8. 内存管理 re模块

    # 内存垃圾回收机制: # 工作原理:引用计数 # 引用就+1 释放就是-1 当计数为0时 就会被垃圾回收机制回收 # 标记清除:解决循环引用导致的内存泄漏 # 标记:GC roots可以直接或间接访 ...

  9. 什么是事务？事务特性？事务隔离级别？spring事务传播特性？

    一.事务的概述 什么是事务? 在数据库中,所谓事务是指一组逻辑操作单元即一组sql语句,当这个单元中的一部分操作失败,整个事务回滚,只有全部正确才完成提交.判断事务是否配置成功的关键点在于出现异常时事 ...

  10. 王之泰/王志成《面向对象程序设计（java）》第十一周学习总结

    第一部分:理论知识学习部分 第十一章理论知识主要为集合类的介绍,在实验中都有所体现且本周主要复习回顾上周的泛型程序设计 第二部分:实验部分 ——集合 1.实验目的与要求 (1) 掌握Vetor.Sta ...