以下方案的通用代码: HTML code: <div class="box"> <div class="content"> <!--content body--> </div> </div> CSS code: .box{width:100%;height:500px;background-color: #00ff00;} .content{width:300px;height:300px;backgrou…

前言 BFC 的概念始于 CSS2,是个蛮古老的 CSS 话题了,网上也到处能搜到 BFC 的介绍,但是都不够简洁.本文系翻译自 Rachel Andrew 女士的博文 Understanding CSS Layout And The Block Formatting Context,内容足够简洁明了. 本文的目的是介绍一些概念,来帮你增强 CSS 码力.如标题所示,这篇文章主要是讲块级格式上下文(BFC,Block Formatting Context).你可能没听过这个术语,但只要你曾经使用…

一.定宽: 1.定位居中(absolute) 方法一: html: <div class="main"></main> css: .main{ width:400px; height:200px; background:#eee; position:absolute; left:50%; top:50%; margin-left:-200px; margin-top:-100px; } 方法二: html: <div class="main&qu…

居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明外,都是兼容IE6+.谷歌.火狐等主流浏览器的. 先来说几种简单的.人畜无害的居中方法 1. 把margin设为auto 具体来说就是把要居中的元素的margin-left和margin-right都设为auto,此方法只能进行水平的居中,且对浮动元素或绝对定位元素无效. 2.使用 text-ali…

居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明外,都是兼容IE6+.谷歌.火狐等主流浏览器的. 先来说几种简单的.人畜无害的居中方法 1. 把margin设为auto 具体来说就是把要居中的元素的margin-left和margin-right都设为auto,此方法只能进行水平的居中,且对浮动元素或绝对定位元素无效. 2.使用 text-ali…

相信大家都会遇到这样的问题,要求一个块上下左右居中,在这里我总结了几个好用的方法 1.已知要居中的块width height 假设  content 要在f里上下左右居中 <div class＝"f"><div class="content"></div></div> <style> .f{ width: 800px; height: 800px; position:relative; } .content…

CSS布局一 实例一(居中) div#container{ width:960px; height:650px; margin:0 auto; border:1px solid #ccc; /*就是说上下边距为0 左右自动,当浏览的大小大于600时,左右两边的margin平分大于出来的宽度*/ /*但是,如果小于的话,就会出现滚动条*/ } 优化:使用我们的max-width:960px; 就不会出现滚动条了滴呀: 所有主流浏览器,包括IE7+在内都支持 max-width 属性: 实例二(宽度…

最近在面试,不停地收到了知识冲击,尤其是对于一些基础的css.html.js问题居多,所以自我也在做反思,今天就css问题,如何让一个子元素div块元素上下左右居中 (以下总结方法,都已得到验证). 情景一:一个浏览器页面中,只有一个div模块,让其上下左右居中 解决方案:  { position:fixed;  left:0; right:0; top:0; bottom:0; margin:auto; } 备注:此处小编使用position:fixed为最佳方案,因为position:fix…

参考文章1.CSS布局奇淫技巧之--各种居中 2.http://www.imooc.com/article/2235 1.行内元素水平居中text-align:center对图片,按钮,文字等行内元素(display为inline或inline-block等)进行水平居中,可对元素或者父元素使用text-align:center 2.定宽块级元素水平居中margin: 0 auto; .container{ width:500px; /* 元素设置定宽*/ height: 200px; marg…

转载自喜欢JS的无名小站 例如 一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;).让其上下左右居中. 方法一(varticle-align) 理念 利用表格单元格的居中属性. 步骤 父div外层配置一个div,同时设置为表格元素 (display: table),宽度为100% 父div配置为表格单元格元素 (display: table-cell) 父div配置居中属性(vertical-align: middle),使子div上下居中 子div通过…