div垂直居中 | 易学教程

让块元素在div中水平居中，并且垂直居中的五种方法

阅读更多关于让块元素在div中水平居中，并且垂直居中的五种方法

在写代码前，先做下准备工作，写两个div,设置下div的大小，把小的div放在大的div里面。可以给小的div设置下颜色，方便观看. 方法一：写一个伪元素，将它设置为行内块元素，高度与父元素相同，写一条属性，vertical-align:middle,子元素也要写，具体代码如下： <style> div{width:500px;height:500px;box-shadow:0 0 5px #000; text-align:center;} .zi{width:100px;height:100px;background:#60C;display:inline-block;vertical-align:middle;} div:after{content:""; height:500px; background:#00C;display:inline-block;vertical-align:middle;} </style> </head> <body> <div > <div class="zi"></div> </div> 方法二：利用定位，给大的div写一个position:relative;子元素写position:absolute; 这时子元素的包含块就是外面大的div,然后给里面的div写一下位置left:0;right:0;top:0;bottom:0;margin

Div垂直水平居中（CSS篇）

阅读更多关于 Div垂直水平居中（CSS篇）

方式一： .pdiv{ width: 500px; height: 400px; margin: 100px auto; border: 1px solid green; position: relative; } .div{ width: 300px; height: 100px; line-height: 100px; text-align: center; border: 1px solid red; position: absolute; top: 50%; left: 50%; margin: -50px 0 0 -150px; } 方式二： .pdiv{ width: 500px; height: 400px; margin: 100px auto; border: 1px solid green; text-align: center; position: relative; } .div{ margin: auto; width: 300px; height: 100px; line-height: 100px; text-align: center; border: 1px solid red; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } 方式三： .pdiv{

前端之CSS

阅读更多关于前端之CSS

一 CSS介绍　　CSS（ C ascading S tyle S heet，层叠样式表)定义如何显示 HTML元素，给HTML设置样式，让它更加美观。　　当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。二 CSS语法 2.1CSS实例　每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。　　　　　　 2.2CSS注释 1 /*这是注释*/ 三 CSS的几种引入方式 3.1行内样式　　行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。 1 <p style="color: red">Hello world.</p> 3.2内部样式　　嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下： 1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 <style> 5 p{ 6 background-color: #2b99ff; 7 } 8 </style> 9 </head> 3.3外部样式　　外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。 1 <link href="mystyle.css" rel="stylesheet"

未知宽高的div怎么垂直水平居中

阅读更多关于未知宽高的div怎么垂直水平居中

恨到弹窗都需要实现垂直水平居中的功能，知道宽高可以用绝对定位，加上设置margin为负值，大小为宽高的一半即可 1 #demo{ 2 position: absolute; 3 width: 200px; 4 height: 200px; 5 top: 50%; 6 left: 50%; 7 margin-left: -100px; 8 margin-top: -100px; 9 } 如果不知道宽高怎么来垂直居中呢？其实很简单，只要加上transform: translate(-50%, -50%);就可以了 1 #demo{ 2 position: absolute; 3 top: 50%; 4 left: 50%; 5 transform: translate(-50%, -50%); 6 } 7 来源： https://www.cnblogs.com/jonie-wong/p/11671147.html

实现div里的img图片水平垂直居中

阅读更多关于实现div里的img图片水平垂直居中

body结构 <body> 　　<div> 　　　　<img src="1.jpg" alt="haha"> 　　</div> </body> 方法一：将display设置成table-cell，然后水平居中设置text-align为center，垂直居中设置vertical-align为middle。 <style type="text/css"> *{margin: 0;padding: 0;} div{ width:150px; height: 100px; display: table-cell; vertical-align: middle; text-align: center; border:1px solid #000; } img { width: 50px; height: 50px; } </style> 方法二：通过position定位来实现。将div设置成相对定位relative，将img设置成绝对定位absolute，left:50%，top:50%，此时图片的左上角位于div的中心，要是图片的中心位于div的中心，就需要将图片向上移动图片高度的一半，并向左移动图片宽度的一半。 <style type="text/css"> *{margin: 0;padding:0;} div{ width:150px; height: 100px;

CSS让未知高度div的内容垂直居中（table-cell 和负margin）

阅读更多关于 CSS让未知高度div的内容垂直居中（table-cell 和负margin）

方案一： <div id="outer"> <div id="middle"> <img id="inner" src=" https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1506010802,1895324471&fm=58&bpow=671&bpoh=409 "/> </div> </div> #outer{ width:500px; height:200px; margin: 50px auto; border:1px solid #CCC; display:table; text-align:center; position:relative; } #middle{ display:table-cell; vertical-align:middle; position:absolute; top:50%; left:50%; } #inner{ position:relative; top:-50%; left:-50%; } 原理：标准浏览器下用table和table-cell布局，然后用vertical-align:middle居中元素，IE67不支持table布局方案二： <div id="outer2"> <img id="inner2" src=" https://ss2.baidu.com

关于div的几个问题

阅读更多关于关于div的几个问题

1.div默认位置是？　　div是块级标签，会独占一行。可以理解为一个容器，如果里面嵌套元素，或者文字可以根据里面的内容自适应宽高。如果不设置宽度，那么宽度将默认变为父级的100%。这里的父级就是body.body是默认有内边距的，内边距是用padding设置的。一般浏览器中都对body标签进行默认的margin设置为 8px ，设置body{margin:0px;padding:0px;} // 清除默认样式为什么给body设置padding:0px不能消除内边距，而设置margin:0px却能够消除内边距？关于这个问题： 1. 每种浏览器都有一套默认的样式表，在网页制作过程，没有指定相应的样式时，就会按照浏览器内置的样式表来渲染。 2. 举例说，IE6、IE7的body标签，默认的样式应该是：display:block;margin:15px 10px;zoom:1;（不是很确定），而没有预设padding值，chrome/firefox也只是设置了margin:8px;没有预设padding，从此可见，设置margin:0;即可消除边距了，这点可以通过简单的试验得出结果了。 3. 注意不同的浏览器甚至同个浏览器不同版本的默认样式是不同的。body标签分别将margin和padding都重置为0这是网络上广为流传的重置方法，应该是比较可靠的了。 4.

div元素宽度不定的情况下如何居中显示

阅读更多关于 div元素宽度不定的情况下如何居中显示

本文转载于: 猿2048 网站 div元素宽度不定的情况下如何居中显示最近由于工作的原因碰到一个问题，就是在一个弹窗宽度不定的情况下还能是该弹窗居中显示，思考许久未找到合适办法，于是在网上找到一些办法在此总结记录下来方便以后的学习。方法一：兼容IE67，但是当元素宽度大于50%时，会出现滚动条。 <div class="father"> <div class="child">这个是需要剧中的元素，宽度不确定</div> </div> .father { display: inlien-block; //使.father得宽度适应.child的宽度 background-color: grey; // 方便看到.father元素 position: relative; left: 50%; } .child { position: relative; left: -50%; } 效果如下：思路如下：外层设置为float:left或者display:inline-block,然后设置相对定位，left:50%，这样左边位置就偏移到了中间的位置;然后内层设置相对定位，left:-50%，这样正好向左偏移自身宽度的一半，实现了居中。方法二：兼容ie67 <div class="father"> <div class="child">这个是需要剧中的元素，宽度不确定</div>

DIV CSS BackGround属性研究

阅读更多关于 DIV CSS BackGround属性研究

在设置 background-image 属性时，有很多属性 1、background:url("图片路径") [no-repeat]; background:url("../images/images/up.jpg") no-repeat; 表示不重复显示图片 2、background-position 版本：CSS1 兼容性：IE6 7+ FF+ 继承性：无语法： background-position :length || length background-position :position || position 取值： position : top | center | bottom | left | center | right 说明：设置或检索对象的背景图像位置。必须先指定 background-image 属性。该属性定位不受对象的补丁属性( padding )设置影响。默认值为： 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角。如果只指定了一个值，该值将用于横坐标。纵坐标将默认为 50% 。如果指定了两个值，第二个值将用于纵坐标。如果设置值为 right center ，因为 right 作为横坐标值将会覆盖 center 值，所以背景图片将被居右定位。对应的脚本特性为

订阅 div垂直居中