对于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. 【Shiro】Apache Shiro架构之身份认证(Authentication)

    Shiro系列文章: [Shiro]Apache Shiro架构之权限认证(Authorization) [Shiro]Apache Shiro架构之集成web [Shiro]Apache Shiro ...

  2. ASP.NET CORE 学习之原生DI实现批量注册

    以前使用Autofac的时候,只需一句AsImplementInterfaces()就可以很轻松实现批量注册功能.而asp.net core内置的DI框架没有现成的批量注册方法,考虑到替换Autofa ...

  3. iOS 9应用开发教程之ios9中实现button的响应

    iOS 9应用开发教程之ios9中实现button的响应 IOS9实现button的响应 button主要是实现用户交互的.即实现响应.button实现响应的方式能够依据加入button的不同分为两种 ...

  4. QTP 无法识别web 大全

    说明:这里以一个登陆框为例,展示了各种方式供你选择. 假设你喜欢对象的话.也能够手动加入对象webedit. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv ...

  5. CvSplit

    /* possible split in the tree */ typedef struct CvSplit { CvTreeCascadeNode* parent; CvTreeCascadeNo ...

  6. 从0到1,Java Web网站架构搭建的技术演进

    俗话说得好,冰冻三尺非一日之寒,滴水穿石非一日之功,罗马也不是一天就建成的,对于开发人员来说,一个好的架构并不是一蹴而就的. 初始搭建 最开始,就是各种框架一搭,然后扔到 Tomcat 容器中跑,这时 ...

  7. 655. Big Integer Addition【easy】

    Given two non-negative integers num1 and num2 represented as string, return the sum of num1 and num2 ...

  8. 解决eclipse无法打开:Failed to load the JNI shared library

    64位系统安装了64位的eclipse,但是jdk是32位的 总之就是eclipse跟jdk搭配不上,所以解决的时候注意这一点

  9. Python中sort以及sorted函数初探

    sorted(...) Help on built-in function sorted in module __builtin__: sorted(...) sorted(iterable, cmp ...

  10. 微信小程序动态显示项目倒计时效果

    效果: wxml代码: <view class='spellNum'> <view> <text style='color: #fff;'>团长</text& ...