css布局使用

目录

  • 常用居中
    1. 垂直居中
    2. 水平居中
    3. 垂直水平居中
  • 单列布局
  • 双列&三列布局

常用居中

垂直居中

单行文本垂直居中

<div class="parent">
    <div class="child">child</div>
</div>

.parent {
   line-height: 200px;
}

图片垂直居中

<div class="parent">
    ![](image.png)
</div>

.parent {
    line-height: 200px;
}
.parent img {
    vertical-align: middle;
}

table方法

<div class="parent">
    <div class="child">child</div>
</div>

.parent {
    display: table;
    height: 100px;
}
        
.child {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

flex方法

<div class="parent">
    <div class="child">child</div>
</div>

.parent {
   display: flex;
   align-items: center;
}

css translate

.parent {
    height: 100px;
    /*不设置高度则要设置如下*/
    /*position:relative;*/
}
        
.child {
    /*不设置高度则要设置绝对定位*/
    /*position:absolute;*/
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
水平居中
<div class="parent">
     <div class="child">child</div>
</div>

行内元素：对父元素设置text-align:center;

定宽块状元素: 设置左右margin值为auto;

不定宽块状元素: 设置子元素为display:inline,然后在父元素上设置text-align:center;

css3 translate

.parent {
position: relative;
}
.child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

通用方案: flex布局，对父元素设置display:flex;justify-content:center;

.parent,
.child {
    border: 1px solid red;
}
.child {
     /*display: inline;*/
}
.parent {
     /*text-align: center;*/
    display: flex;
    justify-content: center;
}```
#####水平垂直居中

position: absolute/fixed;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
background: red;

position: fixed/absolute;
width: 160px;
height: 160px;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: pink;

position: absolute;
width: 80px;
height: 80px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background: green;

#### 单列布局
![](http://upload-images.jianshu.io/upload_images/2065390-25c6a8e53ff1f2f9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
特征：**定宽、水平居中**
常见的单列布局有两种：
一种是header、content、footer宽度都相同，其一般不会占满浏览器的最宽宽度，但当浏览器宽度缩小低于其最大宽度时，宽度会自适应。
一种是header、footer宽度为浏览器宽度，但content以及header和footer里的内容却不会占满浏览器宽度。

对于第一种，对header、content、footer统一设置width或max-width，并通过margin:auto实现居中。

<div class="layout">
<div id="header">头部</div>
<div id="content">内容</div>
<div id="footer">尾部</div>
</div>

.layout {
    /* width: 960px; */
    /*设置width当浏览器窗口宽度小于960px时，单列布局不会自适应。*/
    max-width: 960px;
    margin: 0 auto;
}


对于第二种，header、footer的内容宽度为100%，但header、footer的内容区以及content统一设置width 或 max-width，并通过margin:auto实现居中。

<div id="header">
<div class="layout">头部</div>
</div>
<div id="content" class="layout">内容</div>
<div id="footer">
<div class="layout">尾部</div>
</div>

.layout {
    /* width: 960px; */
    /*设置width当浏览器窗口宽度小于960px时，单列布局不会自适应。*/
    max-width: 960px;
    margin: 0 auto;
}



#### 二列&三列布局
![](http://upload-images.jianshu.io/upload_images/2065390-06862f5dabd3ef11.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
二列布局的特征是侧栏固定宽度，主栏自适应宽度。三列布局的特征是两侧两列固定宽度，中间列自适应宽度。
之所以将二列布局和三列布局写在一起，是因为二列布局可以看做去掉一个侧栏的三列布局，其布局的思想有异曲同工之妙。对于传统的实现方法，主要讨论上图中前三种布局，经典的带有侧栏的二栏布局以及带有左右侧栏的三栏布局，对于flex布局，实现了上图的五种布局。
######a. float+margin
**原理说明**：设置两个侧栏分别向左向右浮动，中间列通过外边距给两个侧栏腾出空间，中间列的宽度根据浏览器窗口自适应。

<div id="content">
<div class="sub">sub</div>
<div class="extra">extra</div>
<div class="main">main</div>
</div>

**布局步骤**:
对两边侧栏分别设置宽度，并对左侧栏添加左浮动，对右侧栏添加有浮动。
对主面板设置左右外边距，margin-left的值为左侧栏的宽度，margin-right的值为右侧栏的宽度。

.sub{ width: 100px; float: left;}
.extra{ width: 200px; float: right;}
.main{ margin-left: 100px; margin-right: 200px;}

**一些说明**:
注意DOM文档的书写顺序，先写两侧栏，再写主面板，更换后则侧栏会被挤到下一列（圣杯布局和双飞翼布局都会用到）。 　
这种布局方式比较简单明了，但缺点是渲染时先渲染了侧边栏，而不是比较重要的主面板。

**二列的实现方法**
如果是左边带有侧栏的二栏布局，则去掉右侧栏，不要设置主面板的margin-right值，其他操作相同。反之亦然。
######b. position+margin
**原理说明**：通过绝对定位将两个侧栏固定，同样通过外边距给两个侧栏腾出空间，中间列自适应。

<div class="sub">left</div>
<div class="main">main</div>
<div class="extra">right</div>

**布局步骤**:
对两边侧栏分别设置宽度，设置定位方式为绝对定位。
设置两侧栏的top值都为0，设置左侧栏的left值为0， 右侧栏的right值为0。
对主面板设置左右外边距，margin-left的值为左侧栏的宽度，margin-right的值为右侧栏的宽度。

.sub, .extra { position: absolute; top: 0; width: 200px;}
.sub { left: 0;}
.extra { right: 0; }
.main { margin: 0 200px;}

**一些说明**:
本方法不限制DOM书写顺序，先写主面板会使主面板部分优先渲染（一般主面板会比侧栏内容重要）。
与上一种方法相比，本种方法是通过定位来实现侧栏的位置固定。
如果中间栏含有最小宽度限制，或是含有宽度的内部元素，则浏览器窗口小到一定程度，主面板与侧栏会发生重叠。

**二列的实现方法**
如果是左边带有侧栏的二栏布局，则去掉右侧栏，不要设置主面板的margin-right值，其他操作相同。反之亦然。
######c. 圣杯布局(float + 负margin)
**原理说明**：
主面板设置宽度为100%，主面板与两个侧栏都设置浮动，常见为左浮动，这时两个侧栏会被主面板挤下去。通过负边距将浮动的侧栏拉上来，左侧栏的负边距为100%，刚好是窗口的宽度，因此会从主面板下面的左边跑到与主面板对齐的左边，右侧栏此时浮动在主面板下面的左边，设置负边距为负的自身宽度刚好浮动到主面板对齐的右边。为了避免侧栏遮挡主面板内容，在外层设置左右padding值为左右侧栏的宽度，给侧栏腾出空间，此时主面板的宽度减小。由于侧栏的负margin都是相对主面板的，两个侧栏并不会像我们理想中的停靠在左右两边，而是跟着缩小的主面板一起向中间靠拢。此时使用相对布局，调整两个侧栏到相应的位置。

<div id="bd">
<div class="main"></div>
<div class="sub"></div>
<div class="extra"></div>
</div>

**布局步骤**:
三者都设置向左浮动。
设置main宽度为100%，设置两侧栏的宽度。
设置 负边距，sub设置负左边距为100%，extra设置负左边距为负的自身宽度。
设置main的padding值给左右两个子面板留出空间。
设置两个子面板为相对定位，sub的left值为负的sub宽度，extra的right值为负的extra宽度。

<style>
.main {
float: left;
width: 100%;
}

.sub {
    float: left;
    width: 190px;
    margin-left: -100%;
    position: relative;
    left: -190px;
}

.extra {
    float: left;
    width: 230px;
    margin-left: -230px;
    position: relative;
    right: -230px;
}

#bd {
    padding: 0 230px 0 190px;
}

</style>

**一些说明**
DOM元素的书写顺序不得更改。
主面板部分优先渲染（一般主面板会比侧栏内容重要）。
当面板的main内容部分比两边的子面板宽度小的时候，布局就会乱掉。可以通过设置main的min-width属性或使用双飞翼布局避免问题。

**二列的实现方法**
如果是左边带有侧栏的二栏布局，则去掉右侧栏，不要设置主面板的padding-right值，其他操作相同。反之亦然。
######d. 双飞翼布局(float + 负margin )
**原理说明**：
双飞翼布局和圣杯布局的思想有些相似，都利用了浮动和负边距，但双飞翼布局在圣杯布局上做了改进，在main元素上加了一层div, 并设置margin,由于两侧栏的负边距都是相对于main-wrap而言，main的margin值变化便不会影响两个侧栏，因此省掉了对两侧栏设置相对布局的步骤。

<div class="main-wrap">
<div class="main">#main</div>
</div>
<div class="sub"></div>
<div class="extra"></div>

**布局步骤**:
三者都设置向左浮动。
设置main-wrap宽度为100%，设置两个侧栏的宽度。
设置 负边距，sub设置负左边距为100%，extra设置负左边距为负的自身宽度。
设置main的margin值给左右两个子面板留出空间。

<style>
.main-wrap {
float: left;
width: 100%;
}

.sub {
    float: left;
    width: 190px;
    margin-left: -100%;
}

.extra {
    float: left;
    width: 230px;
    margin-left: -230px;
}

.main {
    margin: 0 230px 0 190px;
}

</style>

**一些说明**
主面板部分优先渲染（一般主面板会比侧栏内容重要）。
圣杯采用的是padding，而双飞翼采用的margin，解决了圣杯布局main的最小宽度不能小于左侧栏的缺点。
双飞翼布局不用设置相对布局，以及对应的left和right值。
通过引入相对布局，可以实现三栏布局的各种组合，例如对右侧栏设置position: relative; left: 190px;,可以实现sub+extra+main的布局。

**二列的实现方法**
如果是左边带有侧栏的二栏布局，则去掉右侧栏，不要设置main-wrap的margin-right值，其他操作相同。反之亦然。
######e. flex布局

[Flex 布局教程：语法篇 - 阮一峰的网络日志](http://link.zhihu.com/?target=http%3A//www.ruanyifeng.com/blog/2015/07/flex-grammar.html%3Futm_source%3Dtuicool)
[Flex 布局教程：实例篇 - 阮一峰的网络日志](http://link.zhihu.com/?target=http%3A//www.ruanyifeng.com/blog/2015/07/flex-examples.html)
以下是五种布局的flex布局代码：

<div class="layout">
<aside class="aside">侧边栏宽度固定</aside>
<div class="main">主内容栏宽度自适应</div>
</div>
<div class="layout">
<div class="main">主内容栏宽度自适应</div>
<aside class="aside">侧边栏宽度固定</aside>
</div>
<div class="layout">
<aside class="aside">左侧边栏宽度固定</aside>
<div class="main">主内容栏宽度自适应</div>
<aside class="aside">右侧边栏宽度固定</aside>
</div>
<div class="layout">
<aside class="aside">第1个侧边栏宽度固定</aside>
<aside class="aside">第2个侧边栏宽度固定</aside>
<div class="main">主内容栏宽度自适应</div>
</div>
<div class="layout">
<div class="main">主内容栏宽度自适应</div>
<aside class="aside">第1个侧边栏宽度固定</aside>
<aside class="aside">第2个侧边栏宽度固定</aside>
</div>

<style>
.layout {
display: flex;
}

.main {
    flex: 1;
}

.aside {
    width: 200px;
}

</style>

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,088评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,715评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,361评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,099评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 60,987评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,063评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,486评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,175评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,440评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,190评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,550评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2赞 335

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,703评论 1赞 92
  • web前端教程：CSS 布局十八般武艺都在这里了
    CSS布局 布局是CSS中一个重要部分，本文总结了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及单...
    web前端学习阅读 1,584评论 1赞 38
  • 常见 CSS 布局方式
    前言 温馨提示：本文较长，图片较多，本来是想写一篇 CSS 布局方式的，但是奈何 CSS 布局方式种类太多并且实现...
    sunshine小小倩阅读 3,097评论 0赞 59
  • CSS基础
    CSS 是什么 css(Cascading Style Sheets)，层叠样式表，选择器{属性:值；属性：值}h...
    崔敏嫣阅读 1,461评论 0赞 5
  • 你好，陌生人
    Y小姐在某地巧遇了C先生 一见倾心 于是每天都在那里等C先生 后来某一天在此地遇到M君 从此天天都能遇到M君 M君...
    舒湘鱼阅读 189评论 0赞 0