css div布局效果图？divcss布局经典实例
大家好，今天来为大家分享css div布局效果图的一些知识点，和divcss布局经典实例的问题解析，大家要是都明白，那么可以忽略，如果不太清楚的话可以看看本篇文章，相信很大概率可以解决您的问题，接下来我们就一起来看看吧！
css如何实现图片在div中垂直居中
本文章主要介绍css如何实现图片在div中垂直居中问题，具有一定参考价值，希望能给大家提供帮助
平时我们在做页面时经常会遇到让我们把一张图片显示在div正中间但是常常不知道如何去做，今天我们来分享几种常用的css实现图片在div中垂直居中的代码
HTML代码
<div>
<img src="images/1.jpg">
</div>方法一
利用position和margin共同实现
通过给父元素设置绝对定位属性来让子元素相对于div定位
relative是保留原来的位置进行定位并且是相对于自己原来的位置进行定位
absolute是脱离原来位置定位，是相对于最近的有定位的父级进行定位；如果没有有定位的父级元素，就相对于文档进行定位
注意：要使子元素的上下左右都为0，然后设置margin：auto就会自动垂直居中
代码如下
div{
width:200px;
height:200px;
border: 1px solid#ccc;
position: relative;//父元素设置绝对定位
}
img{
position: absolute;//相对定位
width:80px;
height:50px;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;//使其垂直居中
}效果图
方法二
利用display: table-cell;vertical-align: middle;text-align: center;三种属性实现
display:table-cell:会作为一个表格单元格显示（类似<td>和<th>)
vertical-align: middle;设置垂直对齐方式，适用于行级元素
text-align: center：设置水平对其方式，该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。
div{
width:200px;
height: 200px;
margin:300px auto;
display: table-cell;//作为一个表格单元格显示
vertical-align: middle;//设置垂直对齐方式
text-align: center;//设置水平对其方式
border:1px solid#ccc;
}
img{
width:80px;
height:50px;
}效果图
方法三
利用position,以及margin-top、margin-left实现
在本方法中要注意margin-top、margin-left值的设定，要设置为元素高度和宽度的一半，而且都要取负值
例如margin-top:-40px意思就是元素距离上边界向上40px，而margin-top: 40px的意思是距离上边界元素向下40px
div{
width:200px;
height:200px;
border: 1px solid#ccc;
position: relative;
}
img{
position: absolute;
width:80px;
height: 50px;
top:50%;
left:50%;
margin-top:-40px;//向上40px
margin-left:-25px;//向左25px
}效果图
总结：实现利用css将图片在div中垂直居中问题的方法有很多中，
CSS div居中的几种方法
CSS实现div垂直居中的方法有很多，下面div居中的几种方法是自己平时写网页中经常用到的，最常见的例子就是登录注册弹出框。
方法一：对div使用绝对布局position:absolute;并设置top，left，right，bottom的值相等，但不一定都等于0；并且设置margin:auto。
方法二：这个方法要知道div的宽度和高度。对div使用绝对布局position:absolute;并把top和left的值都设置为50%；50%就是指页面窗口的宽度和高度的50%；最后将div左移和上移，左移和上移的大小为div宽度和高度的一半。
其中 margin-left：-100px和 margin-top：-100px可以写成 margin：-100px 0px 0px-100px
方法三：div使用绝对定位position：absolute，并且设置left和top的值都为50%。使用css3的transform属性。transform：translate（-50%，-50%）。
以上3种方法的效果如下显示
若有两个div，里面小的div相对于外面大的div水平垂直居中对齐，有以下几种方法。
方法一：利用position和margin：auto实现。父元素设置position：relative；子元素设置position：absolute，并设置top，left，right，bottom值相等。
方法二：使用position。父元素设置position：relative；子元素设置position：absolute。并设置top和left为50%，并设置左移和上移为子元素的大小的一半。
方法三：使用display：flex。这种方法需要设置浏览器的兼容性。
方法四：使用transform：translate（）。父元素设置position：relative；子元素设置position：absolute。并设置top和left为50%。最后设置transform：translate（-50%，-50%）。
以上四种方法的效果图如下显示
今天就跟大家分享这么多~如果你有更好的方法，请在下方留言
DIV和css布局分别有什么优缺点
优点：
1、大大缩减页面代码，提高页面浏览速度,缩减带宽成本
2、结构清晰，容易被搜索引擎搜索到
3、缩短改版时间
4、强大的字体控制和排版能力
5、CSS非常容易编写。你可以象写html代码一样轻松地编写CSS
6、提高易用性。使用CSS可以结构化HTML，例如：<p>标签只用来控制段落，heading标签只用来控制标题，table标签只用来表现格式化的数据等等。你可以增加更多的用户而不需要建立独立的版本
7、表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，你可以减少未来网页无效的可能。
8、更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价(ranking)。
缺点：
比较表格布局和CSS+DIV发现，CSS语法其实很容易方便，设计师也都承认掌握CSS＋DIV并非需要达到让火箭上天那样高深莫测的知识才行，但某些概念的确还是需要他们去消化吸收。同时，bug问题也是阻止CSS普及的原因之一，即使是web专业人士往往也要花费大量时间修改bug，不用说那些对CSS使用的新手了。深度比较发现，一些通过表格方式可以轻松解决的问题在使用CSS+DIV的时候变得复杂，如果是一个CSS爱好者这可能对他是一种挑战和乐趣，但对于一般设计者而言，这无疑令人沮丧。
此外，如果说大部分网站的设计元素是均匀分布于整个站点，则CSS网站制作的设计元素通常放在几个external外部文件中，这一个或几个文件有可能相当复杂，文件并不小，由此引起的问题也将变得不可忽视，比如CSS文件调用出现异常，整个网站将变得惨不忍睹。
浏览器兼容问题也是目前阻碍CSS+DIV的一个问题，可能在IE里面正常显示的页面，到FireFox中却面目全非。CSS+DIV还有待于个浏览器厂商的进一步支持。种种原因使得web标准的普及有着较高的门槛，这也是很多web标准倡导者的优越感所在。
好了，文章到这里就结束啦，如果本次分享的css div布局效果图和divcss布局经典实例问题对您有所帮助，还望关注下本站哦！