css布局实现—垂直居中
1、Line-Height Method
适用:
-
单行文本垂直居中
html:<div id="parent"> <div id="child">Text here</div> </div>
css:
#child { line-height: 200px; }
-
垂直居中一张图片
HTML:<div id="parent"> <img src="image.png" alt="" /> </div>
css:
#parent { line-height: 200px; } #parent img { vertical-align: middle; }
2、Table Method
适用:通用
html:
<div id="parent"> <div id="child">Content here</div> </div>
css:
#parent {display: table;} #child { display: table-cell; vertical-align: middle; }
低版本 IE fix bug:
#child { display: inline-block; }
3、Absolute Positioning and Negative Margin
适用:块级元素
html:
<div id="parent"> <div id="child">Content here</div> </div>
css:
#parent {position: relative;} #child { position: absolute; top: 50%; left: 50%; height: 30%; width: 50%; margin: -15% 0 0 -25%; }
4、Absolute Positioning and Stretching(即相对定位元素四个方向都是0)
适用:通用,但在IE版本低于7时不能正常工作
html:
<div id="parent"> <div id="child">Content here</div> </div>
css:
#parent {position: relative;} #child { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 50%; height: 30%; margin: auto; }
5、Equal Top and Bottom Padding
适用:通用
html:
<div id="parent"> <div id="child">Content here</div> </div>
css:
#parent { padding: 5% 0; } #child { padding: 10% 0; }
6、Floater Div
适用:通用
HTML:
<div id="parent"> <div id="floater"></div> <div id="child">Content here</div> </div>
css:
#parent {height: 250px;} #floater { float: left; height: 50%; width: 100%; margin-bottom: -50px; } #child { clear: both; height: 100px; }
7.flex
总结:未知宽高垂直居中
1、flex弹性盒子布局
.ele{ /*弹性盒模型*/ display:flex; /*主轴居中对齐*/ justify-content: center; /*侧轴居中对齐*/ align-items: center; }
2、display的table-cell
.box{ /*让元素渲染为表格单元格*/ display:table-cell; /*设置文本水平居中*/ text-align:center; /*设置文本垂直居中*/ vertical-align:middle; }
3、同一行的图片和文字垂直居中 : https://blog.csdn.net/sqc157400661/article/details/72457535
a、如果是 小图标 推荐第三种方法,把图片作为 padding 的背景,使用背景定位中的居中属性。
b、如果小图标有事件触发时,就无法使用 padding 背景,这种方式去居中。我们只能用img标签进行渲染这个图片。https://blog.csdn.net/u010618627/article/details/84783744
<div class="a"> <img src="images/a.png"> <p>干活呢</p> </div>
.a img { width: 20px; height: 15px; vertical-align: middle; /* 这里必须要设置vertical-align: middle,明确是居中设置。不然如果有适配的问题,字体大小变了,下面的属性就要重新校准下。*/ margin: -5px 10px 0 15px; /* 这里是基于 vertical-align: middle 有偏差进行的微调。*/ } .a p{ display: block; width: calc(100% - 55px); height:21px; float: right; line-height: 21px; margin-right: 10px; }
参考 网站:https://blog.csdn.net/wolinxuebin/article/details/7615098