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

时间 2019-11-08

标签布局总结水平居中实现繁體版

原文原文链接

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>

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

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

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

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

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

2、居中布局

一、`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>

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

2.用`text-align`和`inline-block`实现

首先text-align只针对inline元素有效，所以，能够在父元素设置text-align:center,而后改变子元素display:block为inline-block.
index01.css的代码为：

.parent{
                        height: 200px;
                        background-color: gray;
                    
                        text-align: center;
                    }
                    .child{
                        background-color: yellowgreen;
                        height: 200px;
                        width: 200px;
                    
                        display: inline-block;
                    }

3.用`display:table`和`margin:0 auto`实现

首先定宽的块级元素能够设置margin:0 auto实现水平居中
display:table这个元素的做用就像 <table> 元素. 它定义了一个块级盒子.

index02.css的代码为;spa

.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:absolute`和`left: 50%`以及`transform: translateX(-50%)`实现

首先对父元素设置position: relative
对子元素设置绝对定位，相对于父元素定位
用left:50%则能够根据左边进行定位
根据transform，则能够根据自身的宽度偏移

index03.css的代码为：code

.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`实现

对父元素设置display:flex，则第一级子元素是flex-item
对子元素设置justify-content: center;就能够实现居中

/////////orm

也能够对子元素设置margin:0 auto实现居中

index04.css的代码为：htm

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

3、左中右布局

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

4、垂直居中io

height和line-height设置垂直居中
display:flex和align-items: center`
行级元素设置vertial-align: middle

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

CSS布局

1、左右布局

一、float实现左右布局

2、居中布局

一、html结构

2.用text-align和inline-block实现

3.用display:table和margin:0 auto实现