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

2021-11-03  本文已影响0人  cesiuming

水平居中

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;
}
上一篇 下一篇

猜你喜欢

热点阅读