1、水平居中

1.1、行內(nèi)元素水平居中

這里行內(nèi)元素是指文本text、圖像img、按鈕超鏈接等，只需給父元素設(shè)置text-align:center即可實(shí)現(xiàn)。

.box {    text-align: center;    background-color: #f6e5dd;}<div class="box">    水平居中</div>

1.2、塊級(jí)元素水平居中

1.2.1、固定寬度塊級(jí)元素水平居中

只需給需要居中的塊級(jí)元素加margin:0 auto即可，但這里需要注意的是，這里塊狀元素的寬度width值一定要有

.box {    width: 200px;    margin: 0 auto;  /*左右margin值auto自動(dòng)，不能為0*/        background-color: #f6e5dd;}<div class="box">水平居中</div>

?

1.2.2、不固定寬度塊級(jí)元素水平居中

• 方法1：設(shè)置table布局

通過給要居中顯示的元素，設(shè)置display:table，然后設(shè)置margin:0 auto來實(shí)現(xiàn)

.box {    display: table;    margin: 0 auto;        background-color: #f6e5dd;}<div class="box">水平居中</div>

• 方法2：設(shè)置子元素inline-block（多個(gè)塊狀子元素均可居中）

子元素設(shè)置inline-block，同時(shí)父元素設(shè)置text-align:center

.box {    text-align: center;        background-color: #f6e5dd;}.inlineblock-div {    display: inline-block;  /*不能設(shè)置為block或其他*/        text-align: center;    background-color: #d5eeeb;}<div class="box">    <div class="inlineblock-div">子元素1</div>    <div class="inlineblock-div">子元素2</div></div>

• 方法3：設(shè)置flex布局

只需把要處理的塊狀元素的父元素設(shè)置display:flex,justify-content:center;

.box {    display: flex;    justify-content: center;        background-color: #f6e5dd;}.flex-div {    background-color: #d5eeeb;    border: 2px solid red;}<div class="box">    <div class="flex-div">子元素1</div>    <div class="flex-div">子元素2</div></div>

2、垂直居中

2.1、單行文本垂直居中

設(shè)置line-height=height；

.box {    height: 100px;    line-height: 100px;        background-color: #f6e5dd;}<div class="box">垂直居中的文本</div>

2.2、 多行文本垂直居中

通過設(shè)置父元素table，子元素table-cell和vertical-align

vertical-align:middle的意思是把元素放在父元素的中部

.box {    display: table;    width: 300px;    height: 200px;        background-color: #f6e5dd;}.table-div {    display: table-cell;    vertical-align: middle;        border: 5px solid blue;}<div class="box">    <div class="table-div">         垂直居中的文本<br/>        另一行文本    </div></div>

2.3、塊級(jí)元素垂直居中

• 方法1：flex布局

在需要垂直居中的父元素上，設(shè)置display:flex和align-items：center

要求：父元素必須顯示設(shè)置height值

.box {    height: 100px;    width: 300px;    display: flex;    align-items: center;        background-color: #f6e5dd;}.item {    background-color: #d5eeeb;}<div class="box">    <div class="item">垂直居中的塊級(jí)元素</div></div>

• 方法2：利用position和top和負(fù)margin（需知寬高）

.parent {    position: relative;    height: 200px;    width: 200px;        background-color: #f6e5dd;}.child {    position: absolute;    height: 100px;    width: 150px;    top: 50%;    margin-top: -50px;  /*高度的一半*/    line-height: 100px;    background-color: #d5eeeb;}<div class="parent">    <div class="child">已知高度垂直居中</div></div>

• 方法3：利用position和top和transform

transform中translate偏移的百分比就是相對(duì)于元素自身的尺寸而言的。

.parent {    position: relative;    height: 200px;    width: 200px;    background-color: #f6e5dd;}.child {    position: absolute;    top: 50%;    transform: translate(0, -50%);    background-color: #d5eeeb;}<div class="parent">    <div class="child">已知高度垂直居中</div></div>

3、水平垂直居中

3.1、絕對(duì)定位 + 負(fù) Margin

• 原理：首先利用 absolute 定位把容器塊 左頂角 對(duì)準(zhǔn)瀏覽器中心，然后再使用 負(fù) margin 把容器塊向左移動(dòng)自身寬度的一半，向上移動(dòng)自身高度的一半，即可以把容器塊的中心移到瀏覽器中心。

• 優(yōu)點(diǎn)：兼容性好

• 缺點(diǎn)：需要知道寬高，不夠靈活

.container {    /* ---容器盒子水平、垂直居中對(duì)齊--- */    width: 200px;    height: 100px;    position: absolute;    left: 50%;    top: 50%;    margin-left: -100px;    /* 寬度的一半 */    margin-top: -50px;  /* 高度的一半 */    /* ---內(nèi)容居中對(duì)齊--- */    line-height:100px;	/* 同容器盒子的高度一致 */    text-align: center;    background: #f6e5dd;}<div class="container">水平、垂直居中布局</div>

3.2、絕對(duì)定位+Transform

• 原理：首先利用 absolute 定位把容器塊 左頂角 對(duì)準(zhǔn)瀏覽器中心，然后再使用 CSS3 transform 的 translate(x,y) 把容器塊向左(x)移動(dòng)自身寬度的一半，向上(y)移動(dòng)自身高度的一半，即可以把容器塊的中心移到瀏覽器中心。

• 優(yōu)點(diǎn)：不依賴盒子的寬高，比較靈活

• 缺點(diǎn)，兼容不好，在移動(dòng)設(shè)備上建議使用

.container {    /* ---容器盒子水平、垂直居中對(duì)齊--- */    position: absolute;    left: 50%;    top: 50%;    transform: translate(-50%, -50%);    width: 200px;    height: 100px;    /* ---內(nèi)容居中對(duì)齊--- */    line-height: 100px;    /* 同容器盒子的高度一致 */    text-align: center;    background: #e6f4f5;}<div class="container">水平、垂直居中布局</div

3.3、絕對(duì)定位 + 自動(dòng) Margin

• 原理：瀏覽器自動(dòng)計(jì)算絕對(duì)定位的容器塊上下左右外邊距。

• 優(yōu)點(diǎn)：靈活切兼容性好（IE8+）

• 缺點(diǎn)：適用于本身有尺寸的元素（比如圖片），對(duì)于段落等必須顯式設(shè)置其寬高

.container {    /* ---容器盒子水平、垂直居中對(duì)齊--- */    position: absolute;    top: 0;    right: 0;    bottom: 0;    left: 0;    margin: auto;    width: 200px;    height: 100px;    /* ---內(nèi)容居中對(duì)齊--- */    line-height: 100px;    /* 同容器盒子的高度一致 */    text-align: center;    background: #d5eeeb;}<div class="container">水平、垂直居中布局</div>

3.4、Flex布局

• 優(yōu)點(diǎn)：不需要知道寬高

• 缺點(diǎn)：相對(duì)于父容器定位，兼容性不好

.container {    /* ---容器盒子水平、垂直居中對(duì)齊--- */    display: -webkit-flex;    display: -moz-flex;    display: -ms-flex;    display: -o-flex;    display: flex;    justify-content: center;    align-items: center;    width: 200px;    height: 100px;    background: #d5eeeb;}.child {    background: #f6e5dd;    height: 50px;    width: 100px;}<div class="container">    <div class="child">水平、垂直居中布局</div></div>