常用的css布局（水平垂直居中|两列|三列|Sticky Footer...）

fecanal
195 阅读5分钟

CSS最常见的布局可分为

  • 水平居中
  • 垂直居中
  • 水平垂直居中
  • 两列布局
  • 三列布局
  • 等分布局
  • Sticky Footer布局
  • 全屏布局

水平居中（7种）

公共代码

.parent { background: red; }
.child { height: 300px; width: 300px; background: blue; }

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

1.行内块元素使用text-align

.parent{
    text-align:center;
}
.child{
    display:inline-block;
}

2.块级子元素margin

.child{
    margin:0 auto;
}

3.块级子元素relative定位

.child{
    position:relative;
    left:50%;
    margin-left:-150px;
}

4.块级子元素absolute定位

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

5.块级子元素absolute定位+拉伸宽度

.parent{
    position:relative;
}
.child{
    position:absolute;
    left:0;
    right:0;
    /*拉满平宽之后设置margin，就会居中*/
    margin:0 auto;
}

6.块级父元素flex

.parent{
    display:flex;
    /*方案一*/
    justify-content:center;
}
.child{
    /*方案二*/
    margin:auto;
}

7.块级父元素grid

.parent{
    display:grid;
    /*方案一*/
    justify-content:center;
    /*方案二*/
    justify-items:center;
}
.child{
    /*方案三*/
    margin:auto;
}

垂直居中（6种）

公用的代码如下

.parent{
    background-color:red;
    height:600px;
}
.child{
    height:300px;
    width:300px;
    background-color:blue;
}

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

1.行内块元素垂直居中

行内元素span、文字等

.parent{
    line-height:600px;
}
.child{
    display:inline-block;
    vertical-align:middle;
}

行内块元素inline-block

.parent {
    height: 100%;
    background-color: black;
}
.parent::before {
    content: '';
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}
.child {
    height: 200px;
    width: 200px;
    background-color: red;
    display: inline-block;
    vertical-align: middle;
}

2.块级子元素absolute

.parent{
    position:relative;
}
.child{
    position:absolte;
    top:50%;
    /*方案一*/
    margin-top:-150px;
    /*方案二*/
    transform:translateY(-50%);
}

3.块级子元素absolte+拉伸

.parent{
    position:relative;
}
.child{
    position:absolte;
    top:0;
    bottom:0;
    margin:auto;
}

4.flex方案

.parent{
    display:flex;
    /*方案一*/
    align-items:center;
}
.child{
    /*方案二*/
    margin:auto;
}

5.grid方案

.parent{
    display:grid;
    /*方案一*/
    align-items:center;
    /*方案二*/
    align-content:center;
}
.child{
    /*方案三*/
    margin:auto;
    /*方案四*/
    align-self:center;
}

水平垂直居中

公用的代码如下

.parent{
    background-color:red;
    height:600px;
}
.child{
    height:300px;
    background-color:blud;
}

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

1.行内块元素

.parent{
    text-align:center;
    line-height:600px;//仅对不可替换的行内块元素有效（文字）
}
.child{
    display:inline-block;
    vertical-align:middle;
}

2.块级子元素absolute定位+偏移

.parent{
    position:relative;
}
.child{
    position:absolute;
    /*方案一*/
    transform:translate(-50%,-50%);
    /*方案二*/
    left:calc(50%-150px);
    top:calc(50%-150px);
    /*方案三*/
    left:50%;
    top:50%;
    margin-left:-150px;
    margin-top:-150px;
}

3.块级子元素absolute定位+拉伸

.parent{
    position:relative;
}
.child{
    position:absolute;
    top:0;
    botton:0;
    left:0;
    right:0;
    margin:auto;
}

4.flex方案

.parent{
    display:flex;
    /*方案一*/
    justify-content:center;
    align-items:center;
}
.child{
    /*方案二*/
    margin:auto;
}

grid方案

.parent{
    display:grid;
    /*方案一*/
    align-items:center;
    justify-items:center;
    place-items:center;/*缩写*/
    /*方案二*/
    justify-content:center;
    align-content:center;
    place-content:center;/*缩写*/
}
.child{
    /*方案三*/
    margin:auto;
    /*方案四*/
    align-self:center;
    justify-self:center;
    place-self:center;/*缩写*/
}

两列布局

一列定宽（或由子元素决定宽度）、一列自适应 公用代码

<!-- 解决高度塌陷 -->
<div class="container clearfix">
    <div class="left"></div>
    <div class="right"></div>
</div>

.container{
    height:400px;
    background-color:black;
}
.left{
    height:400px;
    width:200px;
    background-color:red;
}
.right{
    height:400px;
    background-color:blue;
}
.clearfix{
    content:'';
    clear:both;
}

1.float+calc()

.left,.right{
    float:left;
}
.right{
    width:calc(100%-200px;)
}

2.float+margin-left

.left{
    float:left;
}
.right{
    margin-left:200px;
}

3.absolute+margin-left

.left{
    position:absulute;
}
.right{
    margin-left:200px;
}

以上几种方案，均为定宽，下面的方案可以由子元素撑起

float+overflow

.left{
    float:left;
}
.right{
    overflow:hidden;/*创建BFC*/
}

flex方案

.container{
    display:flex;
}
.right{
    flex:1;/*表示flex-grow:1，该元素占据所有剩余空间*/
}

grid方案

.container{
    display:grid;
    /* 将其划分为两行，其中一列有本身宽度决定， 一列占剩余宽度*/
    grid-template-columns:auto 1fr;
}

三列布局

三列布局主要分为两种：

  • 第一种是前两列定宽，最后一列自适应，这一种和两列布局很相似
  • 第二种是左右定宽中间自适应 公用代码
<div class="container clearfix">
  <div class="left">左边定宽</div>
  <div class="middle">中间自适应</div>
  <div class="right">右边定宽</div>
</div>

.container{
    height:400px;
    background-color:black;
}
.middle{
    height: 400px;
    background-color: green;
}
.left{
    height:400px;
    width:200px;
    background-color:red;
}
.right{
    height:400px;
    width:200px;
    background-color:blue;
}
.clearfix{
    content:'';
    clear:both;
}

float实现

为了完成效果，需要调整html结构，元素结构为左、右、中

.middle{
    /*方案一*/
    overflow:hidden;/*创建BFC*/
    /*方案二*/
    width: calc(100% - 200px);
}
.left{
    float:left;
}
.right{
    float:right;
}

position实现

思路：左右两列脱离文档流，中间自适应宽度，并通过外边距将容器缩小

.middle{
    width:calc(100% - 400px);
    margin-right:200px;
    margin-left:200px;
}
.left{
    position:absolute;
    left:0;
    top:0;
}
.right{
    position:absolute;
    right:0;
    top:0;
}

flex方案

.container{
    display:flex;
}
.right{
    flex:1;
}

grid方案

.container{
    display:flex;
    grid-template-columns:auto 1fr auto;
}

等分布局

以四等分为例 公用结构

<div class="container clearfix">
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
  <div class="item item4"></div>
</div>

.container{
    height:400px;
    background-color:black;
}
.item{
    height:100%;
}
.item1{
    background-color: red;
}
.item2{
    background-color: yellow;
}
.item3{
    background-color: blue;
}
.item4{
    background-color: green;
}
.clearfix{
    content:'';
    clear:both;
}

float+%

.item{
    width:25%
    float:left;
}

行内块元素+%

.item{
    display:inline-block;
    width:24%;/*行内块元素会有类似于边框的几个像素*/
}

flex方案

.container{
    display:flex;
}
.item{
    flex:1;
}

grid方案

.container{
    display:grid;
    grid-template-columns:repeat(4,1fr);
}

Sticky Footer布局

如果页面内容不够长时，Footer会在浏览器底部；内容足够长时，Footer会在内容底部 公用的代码如下

<div class="main">
  <div class="header"></div>
  <div class="container">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
  </div>
  <div class="footer"></div>
</div>

.header {
    height: 100px;
    background-color: aqua;
}
.container {
    height: 400px;
    display: flex;
}
.middle{
    flex:1;
    background-color: red;
}
.left, .right {
    height: 100%;
    width: 200px;
}
.left {
    background-color: green
}
.right {
    background-color: yellow
}
.footer {
    height: 100px;
    background-color: black;
}

初始界面：image.png

绝对定位方式

avatar
文章
阅读
粉丝