对于div的居中 ,如果是有固定宽高的,可以加margin:auto;水平垂直居中,但如果是不固定宽高,又想让div居中的话,这种方式都可能不奏效,达不到想要的效果。

有两种方法:1、加display:inline;变成内联元素,可以给父级加text-align:center

2.

.inwrap {
float: left;
position: relative;
left: 50%;
}
.page {
float: left;
position: relative;
left: -50%;
}
<div class="wrap clearfix">
<div class="inwrap">
<div class="page">
这是内容
</div>
</div>
</div>

不固定宽度的div居中显示的更多相关文章

  1. 设置div中的div居中显示

    设置div中的div居中显示 方法一. <div class='big'> <div class='small'>box1</div> </div> s ...

  2. DIV居中显示

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 让几个横向排列的浮动子div居中显示的方法

    div设置成float之后,就无法使子div居中显示了,那么如何让几个横向排列的浮动的div居中显示呢,下面有个不错的方法,希望对大家有所帮助 div设置成float之后,在父div中设置text-a ...

  4. 多个div居中显示

    页面中有多个div时我们希望并排居中显示,可以通过在并排显示的div上一层再加一个div,设定宽度,然后让其居中显示达到需要的效果. 关键是要对外层div设定宽度. <!DOCTYPE html ...

  5. css div居中显示的4种写法

    Demo:http://www.feman.cn/h5/center.html .absolute 绝对定位 这是我们最常用的一种居中定位写法 要求必须确定div的宽高度 目前市面上的浏览器基本上都支 ...

  6. div 居中显示

    <html lang="en"> <head> <meta charset="UTF-8"> <title>di ...

  7. 【HTML】div居中显示

    方法1: .parent { width:800px; height:500px; border:2px solid #000; position:relative; } .child { width ...

  8. 使用inline-block,使前面img,后面空div居中显示在一行后,导致当div中有内容时,div下移问题

    .pro_li img,.pro_sm{display: inline-block; *display:inline;*zoom:1;vertical-align: middle ;} 解决方法:使用 ...

  9. 【转】div居中代码 DIV水平居中显示CSS代码

    原文地址:http://www.divcss5.com/rumen/r622.shtml 如何使用CSS让DIV居中显示,让div水平居中有哪些CSS样式呢? 需要的主要css代码有两个,一个为tex ...

随机推荐

  1. Android 4.4KitKat AudioTrack 流程分析

    Android Audio 系统的主要内容: AudioManager:这个主要是用来管理Audio系统的,需要考虑整个系统上声音的策略问题,例如来电话铃声,短信铃声等,主要是策略上的问题. Audi ...

  2. A Translation for Quaternion 一篇对四元数的翻译

    一篇写的非常好的博客:http://www.cnblogs.com/lookof/archive/2012/02/24/2360749.html

  3. linux Apache CGI 安装配置

    Apache 中的提交了一种利用扩展应用程序执行动态网页的机制. 称为Common Gateway Interface (通用网关接口)简称CGI. 本文假定已安装好linux(本文的linux版本为 ...

  4. firefox配置

    Firefox23取消了一个很人性化的功能,就是在GUI界面中禁用JavaScript,对于这点我很不能理解!JavaScript是所有网页木马 的源头,防人之心不可无,FireFox就这么确信能防住 ...

  5. Python 集合常用方法总结

    数据类型:int/str/bool/list/dict/tuple/float/set   (set类型天生去重) 一.集合的定义 s = set()  #定义空集合 s = {'a','b','c' ...

  6. 简单说一下 servlet的生命周期?

    1.servlet有良好的生存期的定义,包括加载和实例化.初始化.处理请求以及服务结束.这个生存期由 javax.servlet.Servlet接口的  init,service和   destroy ...

  7. 【问题记录】javaweb项目的jar无法识别注解的bean

    问题:eclipse中javaweb项目,打成jar包供其它项目使用,发现无法识别使用注解的bean. 原因参考: http://blog.csdn.net/wangpeng047/article/d ...

  8. apache commons io入门

    原文参考  http://www.javacodegeeks.com/2014/10/apache-commons-io-tutorial.html    Apache Commons IO 包绝对是 ...

  9. Hadoop 安装指南

    一.安装JDK 1.用户可以在Oracle JDK的官网下载相应版本的JDK,本例以JDK 1.6为例,官网地址为http://www.oracle.com/tech-network/java/jav ...

  10. java:eclipse-tomcat 配置

    计划开始学习java.第一步 1.在servers窗口中新建server 2.弹出的界面选择对应的tomcat版本 3.这里是关键,已存在的项目不要选择过去,否则最后生成的server配置无法修改se ...