这篇文章给大家分享的是有关如何利用纯CSS实现居中的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
<强>一、行高居中法
父元素:<代码> text-align:中心;行高:600 px;字体大小:0;
子元素:<代码>显示:inline-block;vertical-align:中间;
<强>注: 600 px必须为父元素的高度,这里还需注意的一点是字体大小需设为零,若未写该属性将导致元素并不能精确垂直居中。该方法即为我面试时所答的方法,缺点很明显,父元素高度须确定。(兼容IE8 +)
<强>二、表格单元居中法
父元素:<代码>显示:表格单元;text-align:中心;vertical-align:中间;
子元素:<代码>显示:inline-block;
<强>注:兼容IE8 +
<强>三,上下左右定位+缘居中法
父元素:<代码>位置:相对;
子元素:<代码>位置:绝对;左:0;右:0;上图:0;底部:0;保证金:汽车;
<强>注:兼容IE8 +
<强>四、50%定位+缘居中法
父元素:<代码>位置:相对;
子元素:<代码>位置:绝对;左:50%;上图:50%;保证金:-200 px 0 0 -200 px;
<强>注: 200 px须为该子元素的宽高的一半,例如该子元素宽为100 px,高为50 px,那么边缘取值为-25 px 0 0 -50 px。该方法缺点是须确定子元素宽高。(兼容IE8 +)
<强>五、50%定位+翻译居中法
父元素:<代码>位置:相对;
子元素:<代码>位置:绝对;左:50%;上图:50%;变换:翻译(-50%,-50%);
<强>注:该方法使用了CSS3转换属性,适合用于移动端。(兼容IE9 +)
<强>六,Flexbox居中法
父元素:<代码>显示:flex;justify-content:中心;对齐项目:中心;
<强>注:该方法使用了Flexbox弹性布的局,移动端兼容性也存在很大问题。(兼容IE10 +)
<强>七,Flexbox +利润率居中法
父元素:<代码>显示:flex;
子元素:<代码>保证金:汽车;
<强>注:同上,兼容IE10 +
感谢各位的阅读!关于“如何利用纯CSS实现居中”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
