元素居中的解决方案
居中
1.水平居中
1.1 文本、图片等行内元素的水平居中
text-align: center;
1.2 确定宽度的块级元素的水平居中
方法一：
块级元素设置宽度，margin-left: auto; margin-right: auto;
方法二：
块级元素设置 position: relative; left: 50%; margin-left: -( 宽度 / 2 )px;
1.3 不确定宽度的块级元素的水平居中
方法一：
父元素设置 text-align: center ;
块级元素设置 display:inline-block;
方法二：
父元素设置 float: left; position: relative; left: 50%;
块级元素设置 float: left; position: relative; left: -50%;
方法三：IE 9 +
块级元素设置 position: absolute; left: 50%; transform:translateX(-50%);
transform:translateX(-50%); /*左边缘向左移动自身宽度的一半*/
不确定宽度块级元素
2.垂直居中
2.1 父元素高度不确定的文本、图片、块级元素的垂直居中
父元素设置相同的上下边距
2.2 父元素高度确定的单行文本的垂直居中
父元素 height 和 line-height 设置相同高度值
2.3父元素高度确定的多行文本、图片、块级元素的垂直居中
方法一：
父元素设置 display: table; /*此元素作为块级表格来显示*/
子元素设置 vertical-align: middle; display: table-cell; /*此元素作为块级单元格来显示*/
方法二：
父元素 position:absolute; top: 50%;
子元素 position:relative; top: -50%;
3.水平垂直居中
3.1 确定宽度高度的块级元素的水平垂直居中
方法一：
position:absolute; top: 50%;left: 50%; margin-top: -( 高度 / 2)px; margin-left: -( 宽度 / 2 )px;
多行文本
方法二：基于 Flexbox 解决方案
IE 11+
父元素设置 display: flex;
子元素设置 margin: auto;
3.2 不确定宽度高度的块级元素的水平垂直居中
IE 9+
position:absolute; top: 50%;left: 50%; transform:translate(-50%,-50%);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>元素居中的解决方案</title> <style type="text/css"> *, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; } * { zoom: 1; } * {margin: 0;padding: 0;} body { padding: 20px; } h1, h2, h3, h4, h5 { margin-top: 10px;} p { margin-top: 10px; } ul, li { list-style: none; } a {text-decoration: none; } .box { width: 500px; border: 1px solid #CCC; margin-top: 10px; overflow: hidden; position: relative; } .tc { text-align: center; } .bc { margin-left: auto; margin-right: auto; } .wrap{ width: 500px; height: 200px; border: 1px solid #CCC; margin-top: 10px; position: relative; } </style> </head> <body> <h1>元素居中的解决方案</h1> <h2>1.水平居中</h2> <h3>1.1 文本、图片等行内元素的水平居中</h3> <p>text-align: center;</p> <div class="box tc">文本</div> <div class="box tc"><img src="images/1.jpg"/></div> <h3>1.2 确定宽度的块级元素的水平居中</h3> <h4>方法一：</h4> <p>块级元素设置宽度，margin-left: auto; margin-right: auto;</p> <div class="box"> <div class="bc" style="width: 100px;height: 100px; background: greenyellow;"></div> </div> <h4>方法二：</h4> <p>块级元素设置 position: relative; left: 50%; margin-left: -( 宽度 / 2 )px;</p> <div class="box"> <div class="bc" style="width: 100px;height: 100px; position: relative; left: 50%; margin-left: -50px; background: greenyellow;"></div> </div> <h3>1.3 不确定宽度的块级元素的水平居中</h3> <h4>方法一：</h4> <p>父元素设置 text-align: center ;</p> <p>块级元素设置 display:inline-block;</p> <style type="text/css"> .list_1_3_1 li { display: inline-block; } .list_1_3_1 li a { display: block; padding: 5px; background: gold; } </style> <div class="box"> <ul class="list_1_3_1 tc"> <li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li> </ul> </div> <h4>方法二：</h4> <p>父元素设置 float: left; position: relative; left: 50%;</p> <p>块级元素设置 float: left; position: relative; left: -50%;</p> <style type="text/css"> .list_1_3_2 { position: relative; left: 50%; clear: both; float: left; } .list_1_3_2 li { position: relative; left: -50%; float: left; display: inline-block; } .list_1_3_2 li a { display: block; padding: 5px; background: gold; } </style> <p></p> <div class="box"> <ul class="list_1_3_2"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> </div> <h4>方法三：IE 9 +</h4> <p>块级元素设置 position: absolute; left: 50%; transform:translateX(-50%);</p> <p>transform:translateX(-50%); /*左边缘向左移动自身宽度的一半*/</p> <div class="box" style="height: 100px;"> <span class="bc" style="height: 100px;line-height: 100px; position: absolute; left: 50%; -webkit-transform:translateX(-50%); transform:translateX(-50%); background: greenyellow;"> 不确定宽度块级元素 </span> </div> <h2>2.垂直居中</h2> <h3>2.1 父元素高度不确定的文本、图片、块级元素的垂直居中</h3> <p>父元素设置相同的上下边距</p> <div class="box" style="padding: 20px 0;">文本</div> <h3>2.2 父元素高度确定的单行文本的垂直居中</h3> <p>父元素 height 和 line-height 设置相同高度值</p> <div class="wrap" style="line-height: 200px;">文本</div> <h3>2.3父元素高度确定的多行文本、图片、块级元素的垂直居中</h3> <h4>方法一：</h4> <p>父元素设置 display: table; /*此元素作为块级表格来显示*/</p> <p>子元素设置 vertical-align: middle; display: table-cell; /*此元素作为块级单元格来显示*/</p> <div class="wrap" style="display: table;"> <div style="display: table-cell; vertical-align: middle;">多行文本</div> </div> <h4>方法二：</h4> <p>父元素 position:absolute; top: 50%;</p> <p>子元素 position:relative; top: -50%;</p> <div class="wrap"> <div style="position:absolute; top: 50%;"> <div style="position:relative; top: -50%;">多行文本</div> </div> </div> <h2>3.水平垂直居中</h2> <h3>3.1 确定宽度高度的块级元素的水平垂直居中</h3> <h4>方法一：</h4> <p>position:absolute; top: 50%;left: 50%; margin-top: -( 高度 / 2)px; margin-left: -( 宽度 / 2 )px;</p> <div class="wrap"> <div style="width:100px;height: 100px; position:absolute; top: 50%;left: 50%; margin-top: -50px; margin-left: -50px; background: greenyellow; ">多行文本</div> </div> <h3>方法二：基于 Flexbox 解决方案</h3> <p>IE 10+</p> <p>父元素设置 display: flex;</p> <p>子元素设置 margin: auto;</p> <div class="wrap" style="display: -webkit-box; display: -ms-flexbox; display: flex;"> <div style="margin: auto; width: 100px; height: 100px; background: greenyellow; ">多行文本</div> </div> <h3>3.2 不确定宽度高度的块级元素的水平垂直居中</h3> <p>IE 9+</p> <p>position:absolute; top: 50%;left: 50%; transform:translate(-50%,-50%); </p> <div class="wrap"> <div style="width:100px;height: 100px; position:absolute; top: 50%;left: 50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); background: greenyellow; ">多行文本</div> </div> </body> </html>
