布局总结-水平居中布局的实现

CSS布局

一、左右布局

1、float实现左右布局

                    <!DOCTYPE html>
                    <html lang="en">
                    <head>
                        <meta charset="UTF-8">
                        <link rel="stylesheet" href="index01.css">
                        <title>居中布局的几个实现方案</title>
                    </head>
                    <body>
                        <div class="left"></div>
                        <div class="right">DEMO</div>
                    </body>
                    </html>

标签结构很简单,就是一个父元素里面套了一个子元素

想要实现左右布局,只需要把<div class="left"></div>设置成向左浮动,右边向右浮动

.left{
    float: left;
}
.right{
    float: right;
}

或者把left和right设置成inline-block

.left{
    display: inline-block
}
.right{
    display: inline-block
}

二、居中布局

1、html结构

                    <!DOCTYPE html>
                    <html lang="en">
                    <head>
                        <meta charset="UTF-8">
                        <link rel="stylesheet" href="index01.css">
                        <title>居中布局的几个实现方案</title>
                    </head>
                    <body>
                        <div class="parent">
                            <div class="child">DEMO</div>
                        </div>
                    </body>
                    </html>

标签结构很简单,就是一个父元素里面套了一个子元素

2.用text-aligninline-block实现

  1. 首先text-align只针对inline元素有效,因此,可以在父元素设置text-align:center,然后改变子元素display:blockinline-block.
  2. index01.css的代码为:
                    .parent{
                        height: 200px;
                        background-color: gray;
                    
                        text-align: center;
                    }
                    .child{
                        background-color: yellowgreen;
                        height: 200px;
                        width: 200px;
                    
                        display: inline-block;
                    }

3.用display:tablemargin:0 auto实现

  1. 首先定宽的块级元素可以设置margin:0 auto实现水平居中
  2. display:table这个元素的作用就像 <table> 元素. 它定义了一个块级盒子.
  3. index02.css的代码为;

    .parent{
        height: 200px;
        background-color: gray;
    }
    
    /*display:table
    在表现形式上很像是block元素
    宽度跟着内容走。
    */
    .child{
        display: table;
        margin: 0 auto;
        background-color: greenyellow;
        height: 200px;
        width: 200px;
        text-align: center;
        line-height: 200px;
    }

4.用position:absoluteleft: 50%以及transform: translateX(-50%)实现

  1. 首先对父元素设置position: relative
  2. 对子元素设置绝对定位,相对于父元素定位
  3. left:50%则可以根据左边进行定位
  4. 根据transform,则可以根据自身的宽度偏移
  5. index03.css的代码为:

        .parent{
            height: 200px;
            background-color: gray;
            position: relative;
        }
        .child{
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            height: 200px;
            background-color: greenyellow;
        }

5.用flex+justify-content实现

  1. 对父元素设置display:flex,则第一级子元素是flex-item
  2. 对子元素设置justify-content: center;就可以实现居中

/////////

  1. 也可以对子元素设置margin:0 auto实现居中
  2. index04.css的代码为:

        .parent{
            height: 200px;
            background-color: gray;
            display: flex;    
            justify-content: center;
        }
        .child{
            height: 200px;
            background-color: greenyellow;
            /*  margin: 0 auto;  */
        }

三、左中右布局

左中右布局参考一的左右布局,可将三个元素都设置成float:left
或者将三个元素都设置成dispaly:inline-block

四、垂直居中

  1. heightline-height设置垂直居中
  2. display:flex和align-items: center`
  3. 行级元素设置vertial-align: middle
    原文作者:yangdepp
    原文地址: https://segmentfault.com/a/1190000011362009
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞