[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> ~~~