一百度div居中,多数都是一个答案,但是有时候这种方法并不是万能的。。。不废话,将我知道的方法都列举一下好了,随时更新。

1、设置width值,指定margin-left和margin-right为auto(或margin: 0 auto;)(多数人都知道的方法,就不举例子了)

2、设置width,利用margin-left为width的负一半和相对定位实现水平居中(width和margin-left可以设置百分比)

 #demo {
width:500px ;
height:300px;//高度可以不设,用content撑起高度
margin: 0 0 0 -250px;//(或者直接设置margin-left: -250px;)
position:relative;相对定位
background-color:pink;//方便看效果
left:50%;
top:50%;
}
<div id="demo"></div>

3、待续。。。

如何让div水平居中呢?的更多相关文章

  1. 通过设置CSS属性让DIV水平居中

    通过设置CSS属性让DIV水平居中 ---------------------- <html> <head> <title></title> <m ...

  2. div水平居中

    1.先给它外层的div定位并left:position:absolute;left:50%; 2.获取当前元素div的宽度,并除以2 3.改变它的css:margin-left:-(获取当前元素div ...

  3. div水平居中与垂直居中的方法【摘自美浩工作室官方博客 】

    大家往往在写页面中会遇到不固定宽和高的div如果水平和垂直都居中呢?在写css的时候经常遇到的一个问题,当div没有固定的宽度或者高度的时候,如何才能让div水平或者垂直居中显示.如果div有固定宽度 ...

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

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

  5. 第三章Div水平居中

    1.div居中 text-align:center可以让元素里面的文字内容居中,但并不能让div居中.要让div水平居中必须设置div宽度,外边距设置为margin:0 auto <%@ Pag ...

  6. css+div水平居中

    实现div内容水平居中 实现方案一:margin:0 auto; div{ height:100px; width:100px; background:red; margin:0 auto; } &l ...

  7. 大div中,三个小div水平居中

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. div水平居中和垂直居中

    水平居中和垂直居中 水平居中包含两种情况:        块级元素的水平居中:margin:0px auto;        文字内容的水平居中:text-align: center;        ...

  9. [转]CSS网页布局:div水平居中的各种方法

    http://jingyan.baidu.com/article/fa4125ac90a2a328ac70929e.html 在Web标准中的页面布局是使用Div配合CSS来实现的.这其中最常用到的就 ...

  10. div 水平居中

    对需要水平居中的DIV层添加以下属性: margin-left: auto; margin-right: auto;

随机推荐

  1. Lucene.net(4.8.0) 学习问题记录四: IndexWriter 索引的优化以及思考

    前言:目前自己在做使用Lucene.net和PanGu分词实现全文检索的工作,不过自己是把别人做好的项目进行迁移.因为项目整体要迁移到ASP.NET Core 2.0版本,而Lucene使用的版本是3 ...

  2. CDN页面刷新接口定义[高升]

    一 . 任务 分发 工作流程步骤 1. 合作方按照高升定义的 json 数据格式向高升分发接口 post 任务,高升分发接口会根据接收情况即时反馈接收成功还是失败的结果.二 . 高升 分发 接口 定义 ...

  3. python 序列

    序列 序列是python中的一种数据结构,这种数据结构根据索引来获取序列中的对象 有6种内建序列类:list,tuple,string,unicode,buffer,xrange. 其中xrange比 ...

  4. mybatis实战教程二:多对一关联查询(一对多)

    多对一关联查询 一.数据库关系.article表和user表示多对一的关系 CREATE TABLE `article` ( `id` ) NOT NULL AUTO_INCREMENT, `user ...

  5. windows7 设定开关机事件

    动记录开关机的技能你知道吗? 下面跟我来设定一下记录电脑的开关机时间吧,工作常常会用到的. 在""我的电脑"右击=>管理=>系统工具=>时间查看器=&g ...

  6. junit3对比junit4

    本文内容摘自junit实战,感谢作者的无私奉献. 个人觉得每个开源包的版本对比意义不大,闲来无事,这里就来整理一下好了.本文名为junit3对比junit4,但是我通过这篇博客主要也是想统一的来整理下 ...

  7. IIS使用十大原则,(IIS过期时间,IIS缓存设置) 【转载】

    1. 自定义错误页虽然自定义错误页很简单,但只有少数管理员有效地利用了它.管理员可以在MMC中将HTTP错误信息映像到服务器上的绝对URL或是某个文件,更为详细的信息可以在这里找到.如果你嫌这太麻烦, ...

  8. jsp页面取值

    一般就用el表达式 ${recordList[4].baseRate8.split("/")[0] } <s:date name="recordList[#id]. ...

  9. CSS常用字体名称

    CSS样式中常用的字体名称   css中引入字体: @font-face { font-family: "AncientWar"; src: url('style/css/font ...

  10. thinkphp5学习(一)——thinkphp5的目录结构与开发规范

    开发规范: 目录和文件 目录使用小写+下划线: 类库.函数文件统一以.php为后缀: 类的文件名均以命名空间定义,并且命名空间的路径和类库文件所在路径一致: 类文件采用驼峰法命名(首字母大写),其它文 ...