对于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. HDFS原理解析(整体架构,读写操作流程及源代码查看等)

    前言 HDFS 是一个能够面向大规模数据使用的.可进行扩展的文件存储与传递系统.是一种同意文件通过网络在多台主机上分享的文件系统,可让多机器上的多用户分享文件和存储空间.让实际上是通过网络来訪问文件的 ...

  2. bashrc,bash_profile和/etc/profile

    bashrc,bash_profile和/etc/profile 最近老出现在shell里面能跑的程序用鼠标双击app去不能跑.究其原因是因为环境变量的问题. 在类unix系统中一般有三个bash配置 ...

  3. C#生日提醒小工具

    一个很粗糙的版本,就当一个小例子看一下吧, 运行效果如下: 开发环境VS2017,用的WinForm,涉及一点xml,直接上图. 一.项目涉及的文件如下图: 二.每个文件内容: 1.MainForm  ...

  4. strtol / strtoll / strtoul / strtoull

    function long int strtol (const char* str, char** endptr, int base); —— Convert string to long integ ...

  5. nginx整合php+lua+oracle环境搭建

    nginx整合php+lua+oracle环境搭建 标签: nginxluaoraclephplinux -- : 1473人阅读 评论() 收藏 举报 分类: 技术() 版权声明:本文为博主原创文章 ...

  6. layui的时间线当点击按钮的时候自动添加一条新时间线

    $('.littleTaskBtn li').on('click',function(){ var content=$('.content').html(); $('.layui-timeline-i ...

  7. 接口测试脚本之Jsoup解析HTML

    第一次接触jsoup还是在处理收货地址的时候,当时在写一个下单流程,需要省市区id以及详细门牌号等等,因此同事介绍了jsoup,闲来无事,在此闲扯一番! 1.我们来看下,什么是jsoup,先来看看官方 ...

  8. CMU-15445 LAB2:实现一个支持并发操作的B+树

    概述 经过几天鏖战终于完成了lab2,本lab实现一个支持并发操作的B+树.简直B格满满. B+树 为什么需要B+树 B+树本质上是一个索引数据结构.比如我们要用某个给定的ID去检索某个student ...

  9. django模板{%for%}中的forloop的应用

    {% for k, v in data.items %} {{ k }}: {{ v }} {% endfor %} 这里假设data.items这个列表类似:[ [a,b],[c,d],[e,f]. ...

  10. hdu 1022 Train Problem

    Train Problem I Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...