k韶华 2019-06-28
几个月也零零散散学了不少CSS居中技术,每到用的时候,发现总是稀里糊涂的,有时不知道该选用哪种技术,有时候又常常把方法搞混,索性好好整理一下,以后查阅回顾也更方便。这里只简单总结了大部分主流的居中方法,如果有发现更加牛皮好用的,会不断的更新进来。
text-align:center
(在父元素中设置)margin: 0 auto;
margin:auto
可以实现绝对定位元素的水平垂直居中,见下文。line-height: 父元素的高度;
(在父元素中设置)vertical-align: middle;
(用于垂直对齐inline元素)例如将一个icon与文字对齐。
vertical-align
需要了解文字的baseline和line-box等知识,可参考:[[翻译]关于Vertical-Align你需要知道的事情](https://segmentfault.com/a/11...、我对CSS vertical-align的一些理解与认识(一)position:relative;
具体方法与绝对定位的第1个和第2个方法类似,只不过把absolute改为relative,并根据原float的方向稍作修改即可。
使用50%
推进法则
position: absolute; left: 50%; top: 50%; margin-left: -该元素自身宽度的一半px; /*水平居中*/ margin-top: -该元素自身高度的一半px; /*垂直居中*/
第一种方法的改进版,使用transform
代替margin
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); /*水平垂直居中*/
使用margin:auto;
position: absolute; left: 0; right: 0; /*水平居中*/ top: 0; bottom: 0; /*垂直居中*/ margin: auto;
display: flex; justify-content: center; /*水平居中*/ align-items: center; /*垂直居中*/
display: flex;
,内联元素设置display: inline-flex;
。margin: 0 auto;
或者text-align: center;
让图片居中margin: 0 -100%;
(注意: 父元素必须设置text-align: center;
)
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT