[TOC] >[info]行內元素垂直居中可以用`vertical-align:middle;` 水平居中`text-align:center` ## **行內元素垂直居中：vertical-align:middle** vertical-align屬性在其他標簽出現只影響文字內容 而在td標簽代表的單元格中(可設置`display: table-cell`)影響所有子元素，而不僅僅是影響文字 ``` <style type="text/css"> .container{ width: 200px; height: 200px; background-color: orange; display: table-cell; vertical-align: middle; } .box1{ width: 100px; height: 100px; background-color: yellow; margin: 0 auto; } </style> <div class="container"> <div class="box1"></div> </div> <div class="container"> <div class="box1"></div> </div> <span>123</span> <div class="container"> <div class="box1"></div> </div> ```  注意看表現，只有設置為display: table-cell; 表現為單元格特性時會擠在一行，而其他標簽著獨占一行 去掉span的文字沒高度也會換行  一般很少用此方式 https://www.zhihu.com/question/20543196?? 1.不知道自己高度和父容器高度的情況下（但是父容器和子容器必須要給寬高100%也行）, 利用絕對定位只需要以下三行： 支持ie的 ~~~css #parent{ position:relative; width:100%; height:100%; } #child{ position: absolute; top: 50%; transform: translateY(-50%); width: 300px; height: 200px; } ~~~  ## 父級元素以及子元素高度寬度未知如何實現**水平垂直居中**？ 這個方案在父級元素們沒有設置position為relative的時候，相對于html是水平垂直居中的，但是如果父級元素指定position為relative，并且高度不定的時候，無法實現垂直居中。 ~~~ .child{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* 使用css3的transform來實現 */ } ~~~ 另外還有個辦法 ``` position:fixed;left:50%;top:50%;margin-left:width/2;margin-top:height/2;? 對于ie6,只能把position:改成absolute; ``` 上面方法使用了定位，水平居中就不能使用`0 auto`這種方法了，下面就是解決辦法 ## 2.若父容器下只有一個元素，且父元素設置了高度，則只需要使用相對定位即可 ~~~ #parent{ height:46px; } #child{ position: relative; top: 50%; transform: translateY(-50%); } ~~~ ## 3.Flex 布局? 給父容器設置如下屬性：舊瀏覽器不支持： ~~~ #parent{ display:flex;/*Flex布局*/ display: -webkit-flex; /* Safari */ align-items:center;/*指定垂直居中*/ } ~~~ ## 4.使用給當前元素（瀏覽器都能夠兼容，不足之處就是需要固定寬高） position:absolute,設置left、top、margin-left、margin-top的屬性 ~~~ #child{ 　　 position:absolute; width:200px; height:200px; top:50%; left:50%; margin-top:-100px; margin-left:-100px; background:red; } ~~~ ## 5.利用position:absolute屬性，設置top/bottom/right/left ~~~ #child{ position:absolute; width:140px; height:140px; top:0; right:0; bottom:0; left:0; margin:auto; background:black; } ~~~ ## 6.使用position:fixed,同樣設置left、top、margin-left、margin-top的屬性（IE是不支持這個position:fixed屬性的） ~~~ .child{ position:fixed; width:180px; height:180px; top:50%; left:50%; margin-top:-90px; margin-left:-90px; background:orange; } ~~~ ## 7.利用position:fixed屬性，margin:auto這個必須（和第五個差不多） ~~~ .three{ position:fixed; width:160px; height:160px; top:0; right:0; bottom:0; left:0; margin:auto; background:pink; } ~~~ ## 8.利用display:table-cell屬性使內容垂直居中 ~~~ #child{ display:table-cell; vertical-align:middle; text-align:center; width:120px; height:120px; background:purple; } ~~~ ## 9.最簡單的一種使行內元素居中的方法，使用line-height屬性，比如使文字垂直居中對齊 ~~~ .demo{ width:100px; height:100px; line-height:100px; text-align:center; background:gray; } ~~~ ## 10.使用css3的display:-webkit-box屬性，再設置-webkit-box-pack:center? /? -webkit-box-align:center ~~~ .demo{ width:90px; height:90px; display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center; background:yellow; color:black; } ~~~ ## 11.使用css3的新屬性transform:translate(x,y)屬性?**這個方法可以不需要設定固定的寬高，在移動端用的會比較多，在移動端css3兼容的比較好** ~~~ .demo{ position:absolute; width:80px; height:80px; top:50%; left:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); background:green; } ~~~ ## **12.使用:before元素** ~~~ .demo{ position:fixed; display:block; top:0; right:0; bottom:0; left:0; text-align:center; background:rgba(0,0,0,.5); } .demo:before{ content:''; display:inline-block; vertical-align:middle; height:100%; } .demo .content{ display:inline-block; vertical-align:middle; width:60px; height:60px; line-height:60px; color:red; background:yellow; } ~~~ ## **表格居中? ? ? 除了IE6/7都支持** ~~~ <div id="box"> <div id="content"></div> </div> #box { display: table; height: 400px; background: #c00; } #content { color: #fff; text-align: center; display: table-cell; vertical-align: middle; } ~~~ inline-block居中：?兼容性：支持inline-block的瀏覽器均可。對于IE6/7，可以先使用hack方式使其支持Inline-block后，使用此方法實現垂直居中。 ~~~ #box { 　　height: 400px; 　　background: #c00; } #content, #actor { 　　display: inline-block; 　　vertical-align: middle; } #content { 　　font-size: 12px; 　　color: #fff; } #actor { 　　height: 400px; 　　font-size: 0; } <div id="box"> <div id="content">我是內容<br />我也是內容</div> <div id="actor">我是演員</div> </div> ~~~ ?inline行內元素居中；原理inline 元素的等內邊距，上下兩邊的內邊距相等，則中間內容居中 ~~~ <div class="demo"> <span>These</span> <span>elements</span> <span>will be</span> <span>centered vertically</span> </div> .demo { background-color: black; padding: 50px; } .demo span { background-color: gray; color: white; padding: 50px 0; } ~~~ inline 元素的行高，行高與容器高度相等，則中間內容居中 these elements will be centered verticallay ~~~ .demo { background-color: black; height: 100px; } .demo span { background-color: gray; color: white; line-height: 100px; } ~~~ 如果上面的代碼都不生效的話，有可能行內元素是在表格里面，這個時候可以利用inline元素的 CSS 屬性 vertical-align ，默認是 baseline 屬性，將其設置為 middle，這個屬性常用于 inline-level 和 table-cell 的元素 ~~~ .demo { background-color: black; padding: 50px; display:table; } .demo span { display:table-cell; color: white; vertical-align: middle; } ~~~ # block 元素 ~~~text block 元素利用絕對定位以及負外邊距，適用于知道元素的寬度和高度，兼容性好，所以會看到很多遠古時代的居中都采用這種辦法，注意這里的外邊距減去的是 block 元素寬度的一半，即margin:-（width/2） px ~~~ ~~~ .parent{ position:relative; } .child{ position:absolute; top:50%; height:100px; margin-top:-50px; } ~~~ ~~~ block 元素利用絕對定位以及 transform ，適用于不知道元素的寬度盒高度 .parent{ position:relative; } .child{ position:absolute; top:50%; transform:translateY(-50%); } ~~~ block 元素在外部的容器，利用 flex 的屬性將其設置為下圖，則子元素 block 元素垂直居中 ~~~ .parent{ display:flex; flex-direction:column; justify-content:center; } ~~~ ## **block 元素水平居中** * 在垂直居中的基礎上，block 元素的三種方法均能演變為水平垂直居中，前兩種只需增加 left 屬性以及 margin-left 或者 transformX 當中的一個屬性達到目的 * 利用 flex 的話，添加多一個 align-items:center 即可 方式1方式2的初始代碼： ~~~html <html lang="en"> <head> <meta charset="UTF-8"> <title>task1_4_1</title> <style> #circle1, #circle2{ border-radius: 50px; width: 100px; height: 100px; background-color: #fc0; } #circle1{ position: relative; left:-50px; top: -50px; } #circle2{ position: relative; left:350px; bottom: -50px; } </style> </head> <body> <div class="container"> <div id="circle1"></div> <div id="circle2"></div> </div> </body> </html> ~~~ 方式1：給container添加以下樣式 ```css .container{ width: 400px; height: 200px; background-color: #ccc; position: absolute; left: 50%; top:50%; margin-top: -100px; margin-left: -200px; overflow: hidden; } ``` 方式2：利用transform達到水平垂直居中效果 ~~~css .container{ width: 400px; height: 200px; background-color: #ccc; position: absolute; left: 50%; top:50%; /*利用transform達到水平垂直居中效果*/ transform: translate(-50%, -50%); overflow: hidden; } ~~~ 如圖水平垂直居中與瀏覽器視口  方式3： ~~~css <html lang="en"> <head> <meta charset="UTF-8"> <title>task1_4_1</title> <style> #circle1, #circle2{ border-radius: 50px; width: 100px; height: 100px; background-color: #fc0; } #circle1{ position: relative; left:-50px; top: -50px; } #circle2{ position: relative; left:350px; bottom: -50px; } .wrap{ width:500px; height: 500px; border: 1px solid black; margin: 0 auto; display: flex; justify-content: center; align-items: center; } .container{ width: 400px; height: 200px; background-color: #ccc; overflow: hidden; position: relative; } </style> </head> <body> <div class="wrap"> <div class="container"> <div id="circle1"></div> <div id="circle2"></div> </div> </div> </body> </html> ~~~