div水平居中与垂直居中的方法【摘自美浩工作室官方博客 】
大家往往在写页面中会遇到不固定宽和高的div如果水平和垂直都居中呢?在写css的时候经常遇到的一个问题,当div没有固定的宽度或者高度的时候,如何才能让div水平或者垂直居中显示。
如果div有固定宽度的话,用padding,margin都很容易实现。方法有很多种。不过经常遇到这种div没有固定的宽度高度的情况,我们就不能用margin,padding设置固定的距离了。这个问题让很多人头疼。而怎么样才能让这个div居中显示呢?其实这种情况解决的办法也是有很多种,js,css都可以实现。
1.先来看看宽度不固定的div如何设置水平居中:
无固定宽度的div水平居中代码要点:
这种div宽度不固定的情况,常见于分页处,由于分页不确定有多少页,所以用于分页的元素所在的容器宽度通常不是固定的。
父容器container加css属性 text-align:center;子容器center加css属性display:inline-block;
.center{_display:inline;} 为针对ie6的hack,针对ie6前面的display:inline-block;的作用是在ie下触发元素的layout,使其haslayout。
2.再看看高度不固定的div如何设置垂直居中:
无固定高度的div垂直居中代码要点:
父容器vc的css属性 display:table;overflow:hidden;
子容器vci的css属性 vertical-align:middle;display:table-cell;
针对ie6的hack,vci容器的 _position:absolute;_top:50%; 和content容器的 _position:relative; _top:-50%;
我们看看宽度高度不固定的div垂直居中和水平居中的实例:
代码要点:
父容器vc的css属性 display:table;overflow:hidden;
子容器vci的css属性 vertical-align:middle;display:table-cell;
针对ie6的hack,vci容器的 _position:absolute;_top:50%; 和content容器的 _position:relative; _top:-50%;
如果不需要水平居中的话,需要注释掉vci容器的text-align:center;_left:50%;以及content的display:inline-block;_left:-50%;
那如果宽和高都固定了怎么水平垂直居中呢?且看下面代码:
宽度高度固定的div垂直居中和水平居中实例:
代码要点
父容器要用相对定位position:relative;否则的话子元素会相对于浏览器窗口进行绝对定位。
子容器绝对定位,top:50%;left:50%;margin-top,margin-left的值取该容器高度,宽度的一半的负值。
div水平居中与垂直居中的方法【摘自美浩工作室官方博客 】的更多相关文章
- CSS中元素水平居中和垂直居中的方法
#CSS中水平居中和垂直居中的方法 一. 水平居中 1.行内元素(文本,图片等) 如果被设置元素为文本.图片等行内元素时,可以通过给父元素设置` text-align:center;` 来实现 2.定 ...
- css样式水平居中和垂直居中的方法
水平居中(包含块中居中) 1. 定宽,左右margin为auto.(常规流块盒.弹性项目[不用定宽]) 例子:在box1盒子上设置宽,再设置margin:auto: <style> .bo ...
- div水平居中和垂直居中
水平居中和垂直居中 水平居中包含两种情况: 块级元素的水平居中:margin:0px auto; 文字内容的水平居中:text-align: center; ...
- div盒子水平垂直居中的方法推荐
父盒子是position:relative 方法一:(宽高确定) div绝对定位水平垂直居中[margin 负间距], 方法二: (宽高确定) div绝对定位水平垂直居中[margin:auto实现绝 ...
- css固定宽高DIV内部元素垂直居中的方法
应用案例 案例是这样的,一个外层div,高宽是固定的,但是里面内容不是固定的.很多朋友的做法是头部加一个padding或者margin,这样,里面内容显得貌似是居中了,但是假如内容变化,这样头部的固定 ...
- CSS元素水平居中和垂直居中的方法大全
水平居方法: 1.最熟悉的是给元素定义一个宽度,然后使用margin: body{ width:960px; margin:0 auto;}这个是当我们的定义元素的宽度时显现的,如果我们不能定义宽度时 ...
- div盒子水平垂直居中的方法
这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居中同样的效果,也支持联合可变高度方式使用.内容块定义t ...
- div自适应水平垂直居中的方法
1.Flexbox布局: display:flex; justify-content:center; align-items:center; width:100%; 2.Bootstrap栅格布局 一 ...
- DIV文字水平垂直居中的方法
水平居中 text-align:center 垂直居中(vertical-align) vertical-align:middle; vertical-align时而没效果 然而真实使用的时候,我们会 ...
随机推荐
- 用nstimer实现倒计时
用nstimer实现倒计时 // [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(timerFir ...
- bbs网站 models
bbs网站 models #!/usr/bin/env python #_*_coding:utf-8_*_ from django.db import models from django.cont ...
- (地址)eclipse插件开发攻略的访问地址
园子地址: http://www.cnblogs.com/liuzhuo/category/257208.html 关键字: Eclipse插件开发彻底攻略 eclipse插件开发基础篇之
- iOS,html使用交互相关
1.UIWebView加载Html文件 2.UIWebView的委托方法 3.UIWebView和JS交互 4.使用Safari,WebView调试html 5.使用WKWebView加载Html,和 ...
- RDIFramework.NET 框架兼容各种数据库类型事务使用范例参考
RDIFramework.NET 框架兼容各种数据库类型事务使用范例参考 RDIFramwork.NET框架对数据库的事务做了很好的控制,对多表或多条语句需要在同一事务执行提供了很好的支持,同时支持任 ...
- Linux:Ubuntu14.04离线安装scala(在线安装)
参考Scala安装:http://www.lupaworld.com/thread-970271-1-1.html 以下命令安装默认scala版本 sudo apt-get install scala ...
- 写在开始编写Java之前(1)——Java的跨平台性
Java语言之所以比C语言更加实用 是有原因的 Java的一个重要的特点——跨平台性 无论是哪个平台,如Windows.Linus还是Mac系统 Java的语法都是一样的 这个要比C语言用处要广 因为 ...
- 《zw版·Halcon-delphi系列原创教程》 只有2行代码的超市收款单ocr脚本
<zw版·Halcon-delphi系列原创教程> 只有2行代码的超市收款单ocr脚本只有2行代码的超市收款单ocr脚本 发了这么多教程,有网友问,为什么没有ocr的. 的确,在 ...
- Shadow Zhang PGPool 配置错误定位 s_do_auth: expecting R got E
自从按照教程 http://www.pgpool.net/docs/latest/pgpool-zh_cn.html#hba配置好PGPool以后,每次启动 pgpool -c -n -D 都报 s_ ...
- JavaEE程序员必读图书大推荐
下面是我根据多年的阅读和实践经验,给您推荐的一些图书: 第一部分: Java语言篇 1 <Java编程规范> 星级: 适合对象:初级,中级 介绍:作者James Gosling(Java之 ...