css 居中布局的几种常用方式

作者: cesiuming | 来源:发表于2021-11-03 23:55 被阅读0次

CSS垂直居中，你会多少种写法？
CSS布局(不完全)总结
CSS的布局与居中
css 居中布局的几种常用方式
CSS常用布局实现
初识CSS布局
web前端教程：CSS 布局十八般武艺都在这里了
Good Luck
css水平、垂直居中的方法
4种常用方式实现前端垂直居中

水平居中

1、第一种方案：

父元素设置：text-align: center;
子元素设置：display: inline-block;

优点：浏览器兼容性比较好
缺点：text-align属性具有继承性，导致子级元素的文本也是居中显示的,解决方案在子级元素中增加text-align:lfet;

<div class="parent">
     <div class="child">子级元素</div>
</div>

.parent {
    width: 100%;
    height: 300px;
    background: #ccc;
    /**
        center 居中
        left 居左
        right 居右
     */
    text-align: center;
}
.child {
    width: 300px;
    height: 300px;
    background: rgb(202, 50, 50);
    /**
        display: block;  块级元素
        display: inline; 内联元素
        display: inline-block; 行内块级元素
    */
    display: inline-block;
    text-align: left;
}

2、第二种方案：

优点：只需要设置子级元素进行设置就可以实现水平居中布局的效果
缺点：如果子级元素脱离文档流，导致margin属性的值是无效的（将元素设置为浮动float、绝对定位absolute或者固定定位fixed就会脱离文档流）

<div class="parent">
     <div class="child">子级元素</div>
</div>

.parent {
    width: 100%;
    height: 300px;
    background: #ccc;
}
.child {
    width: 300px;
    height: 300px;
    background: red;

    /**display: ; 
        table  和  block 都可以实现水平居中效果
    */
    display: table;
    /** margin 属性：外边距
        一个值：上右下左
        二个值：上下，左右
            auto: 表示浏览器自动分配
        三个值：上，左右，下
        四个值：上右下左
    */
    margin: 0 auto;
}

3、第三种解决方案

优点：无论父级元素是否脱离文档流，都不影响子级元素水平居中效果
缺点：transform属性是css3中新增的属性，浏览器支持情况不好

.parent {
    width: 100%;
    height: 300px;
    background: #ccc;

    position: relative;
}
.child {
    width: 300px;
    height: 300px;
    background: red;

    /**
        把当前元素设置为绝对定位之后：
        - 父级元素没有开启定位，当前元素是相对于页面定位的
        - 父级元素开启定位，当前元素是相对于父级元素的
    */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

垂直居中

1、第一种：table-cell

.parent {
    width: 300px;
    height: 600px;
    background: #ccc;

    /** 
        display属性：
        table: 设置当前元素为<table>元素
        table-cell: 设置当前元素为<td></td>元素（单元格）
    */
    display: table-cell;
    /** 
        vertical-aligin属性：用于设置文本内容的垂直方向对齐方式
        top: 顶部对齐
        middle: 居中对齐
        bottom: 底部对齐
    */
    vertical-align: middle;
}
.child {
    width: 300px;
    height: 300px;
    background: red;
}

2、第二种：position + transform

.parent {
    width: 300px;
    height: 600px;
    background: #ccc;
    position: relative;
}
.child {
    width: 300px;
    height: 300px;
    background: red;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

3、第三种：行内块级元素

.parent {
    width: 300px;
    height: 600px;
    background: #ccc;
}
.child {
    width: 300px;
    height: 300px;
    background: red;
}
.parent::after {
    content: ' ';
    height: 100%;
}
.parent::after, .child {
    display: inline-block;
    vertical-align: middle;
}

4、第四种：flex

优点：内容块的宽度任意，可用于更复杂高级的布局技术
缺点：IE8/IE9不支持

.parent {
    width: 300px;
    height: 600px;
    background: #ccc;
    display: flex;
    align-items: center;
}
.child {
    width: 300px;
    height: 300px;
    background: red;
}

5、第五种：postion + margin-top负高度的一半

.parent {
    width: 300px;
    height: 600px;
    background: #ccc;
    position: relative;
}
.child {
    width: 300px;
    height: 300px;
    background: red;
    position: absolute;
    top: 50%;
    margin-top: -150px; // 负的高度的一半
}

6、第六种：绝对定位 + left、right、bottom、top+margin

.parent {
    width: 300px;
    height: 600px;
    background: #ccc;
    position: relative;
}
.child {
    width: 300px;
    height: 300px;
    background: red;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

7、第七种：display:grid

.parent {
    width: 300px;
    height: 600px;
    background: #ccc;
    display: grid;
}
.child {
    width: 300px;
    height: 300px;
    background: red;
    margin: auto;
}

居中部局

1、table+margin 实现水平方向的居中，table-cell + vertical-aligin实现垂直方向居中

.parent {
    width: 600px;
    height: 600px;
    background: #ccc;
    display: table-cell;
    vertical-align: middle;
}
.child {
    width: 300px;
    height: 300px;
    background: red;
    margin: auto;
    display: block;
    margin: 0 auto;
}

2、absolute + transform

.parent {
    width: 600px;
    height: 600px;
    background: #ccc;
    position: relative;
}
.child {
    width: 300px;
    height: 300px;
    background: red;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

3、display:grid + margin:auto

.parent {
    width: 600px;
    height: 600px;
    background: #ccc;
    display: grid;
}
.child {
    width: 300px;
    height: 300px;
    background: red;
    margin: auto;
}

4、flex

.parent {
    width: 600px;
    height: 600px;
    background: #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
}
.child {
    width: 300px;
    height: 300px;
    background: red;
}

圣杯布局

圣杯布局是来源于该布局效果类似圣杯而得名，简单来说，就是指三行三列布局。
主要是实现中间主体部分中的左右定宽+中间自适应的布局效果。

<div class="parent">
   <div class="center">1</div>
   <div class="left">2</div>
   <div class="right">3</div>
</div>

.parent{
    height: 300px;
    margin-left: 300px;
    margin-right: 300px;
}
.left,
.center,
.right{
    height: 300px;
    float: left;
}
.left,
.right{
    width: 300px;
}
.left{
    margin-left: -100%;
    position: relative;
    left: -300px;
    background: chocolate;
}
.center{
    background: darkcyan;
    width: 100%;
}
.right {
    background: darkred;
    margin-left: -300px;
    position: relative;
    right: -300px;
}

双飞翼布局

针对圣杯布局的优化解决方案，主要优化了圣杯布局中开启定位的问题

<div class="parent">
  <div class="center">
      <div class="inner"></div>
  </div>
  <div class="left"></div>
  <div class="right"></div>
</div>

.parent{
    height: 300px;
}
.left,
.center,
.right{
    height: 300px;
    float: left;
}
.left,
.right{
    width: 300px;
}
.left{
    margin-left: -100%;
    background: chocolate;
}
.center{
    background: darkcyan;
    width: 100%;
}
.right {
    background: darkred;
    margin-left: -300px;
}
.inner{
    height: 300px;
    margin: 0 300px;
}

等分布局

<div id="parent-box">
  <div id="parent">
    <div class="col1"><div class="inner"></div></div>
    <div class="col2"><div class="inner"></div></div>
    <div class="col3"><div class="inner"></div></div>
    <div class="col4"><div class="inner"></div></div>
  </div>
</div>

方案一：

#parent-box {
  overflow: hidden;
}
#parent {
    height: 300px;
    margin-left: -10px;
}
.col1,.col2,.col3,.col4 {
    width: 25%;
    height: 300px;
    float: left;
    padding-left: 10px;
    box-sizing: border-box; /** 盒子模型为border-box */
}
.inner {
    height: 300px;
}
.col1 .inner {
    background: darkred;
}
.col2 .inner {
    background: darksalmon;
}
.col3 .inner {
    background: darkslateblue;
}
.col4 .inner {
    background: darkviolet;
}

方案二：

#parent-box {
    overflow: hidden;
}
#parent {
    width: 1400px;
    display: table;
    margin-left: -10px;
}
.col1,.col2,.col3,.col4 {
    height: 300px;
    display: table-cell;
    box-sizing: border-box;
    padding-left: 10px;
}
.inner {
    height: 300px;
}
.col1 .inner {
    background: darkred;
}
.col2 .inner {
    background: darksalmon;
}
.col3 .inner {
    background: darkslateblue;
}
.col4 .inner {
    background: darkviolet;
}

等高布局

第一种

#parent-box {
    display: table;
}
.left,.right {
    width: 300px;
    display: table-cell;
}
.left {
    background: #ccc;
}
.right {
    background:#909090;
}

第二种

#parent-box {
    overflow: hidden;
}
.left,.right {
    width: 300px;
    float: left;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}
.left {
    background: #ccc;
}
.right {
    background:#909090;
}

css3多列布局

columns

#parent {
    /* column-count: 4;
    column-width: 300px; */
    columns: 4 300px;
    column-gap: 1.2rem; // 默认为1rem，用于设置列与列之间的间距，该属性需要为多列显示时的元素设置
    column-rule: 2px blue solid; // 用于定义列与列之间的边框，其中包括边框宽度、颜色、样式
}
.col1,.col2,.col3,.col4 {
    height: 300px;
}
.col1 {
    background: darkred;
}
.col2 {
    background: darksalmon;
}
.col3 {
    background: darkslateblue;
}
.col4 {
    background: darkviolet;
}

CSS垂直居中，你会多少种写法？
CSS控制居中是前端开发中非常常用的布局技能，本文列出几种CSS控制元素居中的几种方法。谈及HTML元素居中展...
CSS布局(不完全)总结
CSS布局(不完全)总结实现水平居中布局的几种方式方法一：通过以下CSS代码实现水平居中布局方法二：通过...
CSS的布局与居中
今天就总结一下CSS中几种常用的布局方式和居中方式。 1. 左右布局网页布局常见左右两列布局，左侧栏是固定宽度。...
css 居中布局的几种常用方式
水平居中 1、第一种方案：父元素设置：text-align: center;子元素设置：display: inl...
CSS常用布局实现
该系列用于整理记录常用的CSS布局实现。 CSS常用布局实现01-水平居中 CSS常用布局实现02-垂直居中 CS...
初识CSS布局
本文将简单学习几种基本的CSS布局方式：左右布局，左中右布局，水平居中，垂直居中。左右布局本文只介绍两种最基础...
web前端教程：CSS 布局十八般武艺都在这里了
CSS布局布局是CSS中一个重要部分，本文总结了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及单...
Good Luck
概念 HTML以及CSS篇，集中在CSS 说下你常用的几种布局方式，集中往盒模型、flex布局说(至于grid布局...
css水平、垂直居中的方法
css居中常用的几种方式行内元素水平、垂直居中方案一(不设置居中元素宽高)，代码如下：使用display: t...
4种常用方式实现前端垂直居中
垂直居中 4种常用方式实现前端垂直居中Demo地址基本html结构基本css样式 1. 定位布局利用relat...