一百度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. 辩证看待 iostat

    前言 经常做系统分析会接触到很多有用的工具,比如 iostat,它是用来分析磁盘性能.系统 I/O 的利器. 本文将重点介绍 iostat 命令的使用,并分析容易引起误解的几个指标. iostat i ...

  2. [转]CentOS Apache 性能调试!

    查看Apache的并发请求数及其TCP连接状态: netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) print a, S[a]}' 返回结果示例 ...

  3. 如何通过命令或脚本方式在Windows上访问linux系统

    很多情况下,我们需要在Windows上写脚本,创建计划任务程序,这个过程中可能需要访问linux系统,执行脚本或者上传下载文件.并且我们也不想在Windows上安装什么东西.那最好的办法就是使用put ...

  4. [Python]Conda 介绍及常用命令

    一.介绍 Anaconda 是一个用于科学计算的 Python 发行版,支持 Linux, Mac, Windows, 包含了众多流行的科学计算.数据分析的 Python 包.其使用conda系统进行 ...

  5. EL表达式和JSTL核心标签库

    1 EL表达式 1.1 EL的概述 EL,全名为Expression Language. 主要作用: ①EL表达式主要用于替换jsp页面中的脚本表达式,以便于从各种类型的web域中检索java对象(某 ...

  6. Ubuntu中使用dnw工具:没有找到/dev/secbulk0

    Ubuntu中使用dnw动机: 一. 之前没有用ubuntu中的dnw,想试试. 二. 因为换了win10系统,怕搞不定win10中dnw的驱动,想着在ubuntu中不用禁用数字签名啥的比较省心.(事 ...

  7. 【转】 C++易混知识点4: 自己编写一个智能指针(Reference Counting)学习auto_ptr和reference counting

    这篇文章建大的介绍了如何编写一个智能指针. 介绍: 什么是智能指针?答案想必大家都知道,智能指针的目的就是更好的管理好内存和动态分配的资源,智能指针是一个智能的指针,顾名思义,他可以帮助我们管理内存. ...

  8. 提取位于<title>...</title>内的文本标题内容

    #vim title.txt <title>nhlinkin</title> # cat title.txt  | sed 's:.*<title>\([^< ...

  9. MySQL--REPEATABLE-READ隔离级别下读取到的“重复数据”

    在MySQL中,使用MVCC来实现REPEATABLE-READ隔离级别,由于SELECT操作不会对数据加锁,其他回话可以修改当前回话所读取过的数据而不会被阻塞,因此读写不冲突. 在MVCC并发控制中 ...

  10. Vue.js根据列表某列值更新filter

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...