佈局總結-水平居中佈局的實現

時間 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;  */
    }