对于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. 3.3v转5v开关电源芯片LM2731

    方案一 输入3.3(可为2.7~14v):输出5v,700ma.已经过实际验证. 其中:C1,C2为贴片陶瓷电容,Cf也为贴片陶瓷电容,L1为6.8uH 电感 输出值只和R1,R2的值有关,但手册中又 ...

  2. javascirpt 用英文逗号替换英文分号、中英文逗号或者回车

    function ReplaceSeperator(mobiles) { var i; var result = ""; var c; for (i = 0; i < mob ...

  3. FreeSWITCH技巧:notify与message-waiting

    FreeSWITCH技巧:notify与message-waiting @(Freeswitch经验点滴) 现象描述 在客户端登陆抓包时,发现了FreeSWITCH发来的包: NOTIFY sip:9 ...

  4. LINQ - 在Where條件式中使用in與not in(转载)

    算算時間,接觸LINQ也有一個月的時間了,可以算是落伍兼新生,不過最近在寫專案的時候,遇到了在LINQ的Where條件式中要如何使用in與 not in呢!? 這時候真的只能坐在位子上仰天長笑,開始懷 ...

  5. myeclipse中配置schemaLocation路径,实现xml文件自动提示

    在开发中,XML的xsi:schemaLocation路径都是指向网络,但是这个网络地址有时候很不给力导致工程检验XML格式缓慢.所以有必要再myeclipse中配置本地xsd文件路径,以免每次校验都 ...

  6. atitit.软件设计模式大的总结attialx总结

    atitit.软件设计模式大的总结attialx总结 1. 设计模式的历史3 2. 设计模式的数量(253个)3 3. 设计模式的结构4 3.1. 应用场景and条件Context4 3.2. Pro ...

  7. List 通过 Collections.binarySearch 进行记录筛选

    1. Collections.sort(list, new Comparator<TreeDto>() { @Override public int compare(TreeDto a2, ...

  8. poj 3617 Best Cow Line (字符串反转贪心算法)

    Best Cow Line Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 9284   Accepted: 2826 Des ...

  9. 如何查看VisualStudio的编译, 链接命令

    VisualStudio默认是不显示编译命令的,如何查看呢. 对于链接器: 项目属性 -> 配置属性 -> 链接器 -> 常规 -> 显示进度 -> 设为 "/ ...

  10. linux学习笔记9--命令cat

    cat命令的用途是连接文件或标准输入并打印.这个命令常用来显示文件内容,或者将几个文件连接起来显示,或者从标准输入读取内容并显示,它常与重定向符号配合使用. cat命令连接文件并打印到标准输出设备上, ...