介绍一种css水平垂直居中的方法(非常好用!)

这次介绍一下一个水平垂直居中的css方法,这个方法可以说是百试百灵,废话不多说,直接附上代码:

html,body{

width:100%;

height:100%;

}

你需要居中的元素{

position: fixed;(absolute)
      left:50%;
      top:50%;
      -webkit-transform: translate(-50%,-50%);

}

他的父元素{

position: relative;

width:100%;

height:100%;

}

当然,你的父元素是需要一个高度的,不管是根据html和body的height:100%;还是具体的高度,这样子,你的元素不管怎么样都可以居中。根本不用去考虑margin或者padding或者float之类的属性,是不是很神奇!

时间: 11-17

介绍一种css水平垂直居中的方法(非常好用!)的相关文章

常见的几种 CSS 水平垂直居中解决办法

用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:auto 之类的即可. 主要麻烦的地方还是在垂直居中的处理上,所以接下来主要考虑垂直方向上的居中实现. 水平垂直居中主要包括三类:基本文本类,图像类,其他元素类 但,也是由一些方法可以实现的,下面就来谈谈了解到的10中方法. 方法一.使用 line-height 这种方式更多地用在 单行文字的情况,其中使用overflow:hidden的设置是

CSS水平垂直居中常见方法总结(转)

行内元素: 父级元素是块级元素:父元素设置text-align:center 1.元素水平居中 margin: 0 auto;谁居中,谁设置 居中不好使的原因: 1.元素没有设置宽度,没有宽度怎么居中嘛! 2.设置了宽度依然不好使,你设置的是行内元素吧 实例1: <div class="box"> <div class="content"> 哇!居中了 </div> </div> <style type=&quo

CSS水平垂直居中常见方法总结2

1.文本水平居中line-height,text-align:center(文字)元素水平居中 margin:0 auo 方案1:position 元素已知宽度 父元素设置为:position: relative; 子元素设置为:position: absolute; left: 50%;top: 50%;margin: -50px 0 0 -50px;距上50%,据左50%,减去元素自身宽度的距离 方案2:position transform 元素未知宽度 margin: -50px 0 0

聊聊css水平垂直居中那些事

1.水平居中实现方法 <div class="demo">     我是一个水平居中的div </div> /*方法1*/ .demo{width: 960px;margin: 0 auto;} /*方法2*/ .demo{width: 960px;height: 400px;background: #f00;position: relative;left: 50%;margin-left: -480px;} 2.水平垂直居中实现方法 <div class

介绍几种搭建Dojo环境的方法

Hello World! 的时间到了,在你所学过的众多语言中,哪个不是从此学起的呢?但在此之前,我们要先构建一个开发环境,如同刚开始学习Java的时候,还是需要我们先安装JDK.配置好环境变量等等,HelloWorld才会乖乖的显示在命令行上. 对于脚本类语言,开发环境就是文本编辑器+语言包(dojo.js),对于学习JavaScript来说更简单,只需要有主流浏览器作为支持就够了,浏览器就能来解析它.对于Dojo的开发环境,有以下几类: 介绍几种搭建Dojo环境的方法 下载Dojo文件 在ht

CSS水平垂直居中的几种方法

直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; border: 1px solid #465468; } img{ position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; } HTML代码: <div> <img src="mm.jpg&quo

CSS水平垂直居中的几种方法2

直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; border: 1px solid #465468; } img{ position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; } HTML代码: <div> <img src="mm.jpg&quo

CSS水平垂直居中方法总结

部分HTML代码如下: <div class="wrap block"> <div class="block-center">块儿居中</div> </div> <div class="wrap inline"> <span class="inline-center">内联居中</span> </div> 一.absolute 拔河

CSS元素水平垂直居中的方法(附内联元素,块级元素的基本概念)

用CSS让元素居中显示并不是件很简单的事情.同样的CSS居中设置在不同浏览器中的表现也各有千秋.本文就介绍了在CSS中常见的几种让元素水平居中显示的方法. 1.使用自动外边距实现居中 CSS中首选的让元素水平居中的方法就是使用margin属性—将元素的margin-left和margin-right属性设置为auto即可.在实际使用中,我们可以为这些需要居中的元素创建一个起容器作用的div.需要特别注意的一点就是,必须为该容器指定宽度: 在大多数主流浏览器中,这种方法都非常有效,即使是Windo