css居中最佳实践

BlackFlagBin 发布于2019-08-29 11:02 / 350人阅读

摘要：居中是非常常见的问题，也是面试热门，现在对居中问题做个总结水平居中万能的居中给父元素添加子元素都会居中，无论是还是缺点属性会继承会影响后代元素配合缺点以下不兼容，不过低版本微软自家都不支持了垂直居中单行居中与相等即可达到居中配

css居中是非常常见的问题，也是面试热门，现在对居中问题做个总结

水平居中 万能的text-align居中

给父元素添加text-align:　center,子元素都会居中，无论是inline还是block
缺点：text-align属性会继承会影响后代元素

display: table配合margin: 0 auto

.center {
    display: table;
    margin: 0 auto;
}

缺点：IE7以下不兼容，不过低版本IE微软自家都不支持了

垂直居中 line-height单行居中

line-height与height相等即可达到居中

.center{
    height: 100px;
    line-height: 100px;
}

display: table-cell配合vertical

父元素添加display: table,
子元素：

.child{
    display: table-cell;
    vertical-align: middle;
}

后两种都支持多行文字居中

综合解决方案 flexbox

给父元素设置display: flex;，水平居中用justify-content: center;,垂直居中设置align-items: center;

.parent{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
}

缺点：兼容不是很好

绝对定位配合transform

父元素设置相对定位

.child{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%, -50%);
}

缺点：低版本IE不兼容
同时这两种方案也解决了不定宽高居中的问题

参考资料

CSS居中完全指南
CSS之各种居中
Flex布局兼容性

云服务器 GPU云服务器最佳实践 webrtc最佳实践 cdn最佳实践 vpc最佳实践

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111383.html

《CSS世界》笔记三：内联元素与对齐

摘要：上一篇世界笔记二盒模型四大家族下一篇世界笔记四流的保护与破坏写在前面在页面布局中，内联元素的垂直对齐是比较常见和基础的布局需求，但是我们往往会因为垂直对齐中的，而头疼不已。上一篇：《CSS世界》笔记二：盒模型四大家族下一篇：《CSS世界》笔记四：流的保护与破坏写在前面在页面布局中，内联元素的垂直对齐是比较常见和基础的布局需求，但是我们往往会因为垂直对齐中的1px，2px而头疼不已...

HtmlCssJs 2019-08-29 16:19 评论0 收藏0
开发H5时背景照片兼容不同手机屏幕处理的最佳实践

摘要：翻页的背景图通常是要求全屏的。这里就存在一个问题，目前市面上的手机屏幕比例非常的不统一，这导致在背景图上的处理相当要注意。设置背景图的是生成图片会是这样的效果比例的手机裁切的是靠下的部分，而比例的手机裁切的是靠右的部分。最近在重新做过去常做的翻页H5，关于背景图有些新的经验心得分享。翻页H5的背景图通常是要求全屏的。这里就存在一个问题，目前市面上的手机屏幕比例非常的不统一，这导致在...

MonoLog 2019-08-30 15:55 评论0 收藏0
开发H5时背景照片兼容不同手机屏幕处理的最佳实践

摘要：翻页的背景图通常是要求全屏的。这里就存在一个问题，目前市面上的手机屏幕比例非常的不统一，这导致在背景图上的处理相当要注意。设置背景图的是生成图片会是这样的效果比例的手机裁切的是靠下的部分，而比例的手机裁切的是靠右的部分。最近在重新做过去常做的翻页H5，关于背景图有些新的经验心得分享。翻页H5的背景图通常是要求全屏的。这里就存在一个问题，目前市面上的手机屏幕比例非常的不统一，这导致在...

joyvw 2019-08-02 14:14 评论0 收藏0
css相关 - 收藏集 - 掘金

摘要：在正式前端一些小细节前端掘金英文原文，翻译未来的太让人兴奋了一方面，是全新的页面布局方式另一方面，是酷炫的滤镜颜色等视觉效果。老司机教你更好的进行编程个技巧前端掘金并不总是容易处理。 CSS3 实现文字流光渐变动画 - 前端 - 掘金来自百度前端技术学院的实践任务：有趣的鼠标悬浮模糊效果，参考：http://ife.baidu.com/course/d...，用CSS3实现了一下，顺便...

molyzzx 2019-08-29 12:38 评论0 收藏0