如何让块元素居中
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何让块元素居中相关的知识，希望对你有一定的参考价值。
参考技术A 其实这个问题，许多人都会遇到，当然我也遇到过，最近想学前端的小伙伴突然来问我，如何让块居中，我想了想，告诉他一种方法，块元素居中是一件很麻烦的事情，不过块元素居中又经常用，据说这个问题已经围绕前端好久了。好在最近在拜读CSS揭秘这一本书，感觉学到了许多，推荐给大家。1、最普通的方法，用定位和margin负值就可以实现。
div
position:absolute;
top:50%;
left:50%;
margin-top:-3px;
margin-left:-6px;
width:12px;
height:6px;
如题：这个也可以简单的缩减一下：
div
position:absolute;
top: calc（50%-3px）;
left:（50%-6px）;
width:12px;
height:6px;
当然以上的这个方法我们要知道固定的宽高，其实很麻烦的，如果宽高要是奇数的话，就会很坑。
2、第二个方法可以完美解决固定宽高的问题，我们不需要计算了！不过要注意，一旦出现半像素将会导致元素的一些显示会有模糊，毕竟在CSS中没有十全十美的技巧。
只需要2个东西：一个是绝对定位，另一个是transform位移（CSS3）
div
position：absolute;
top：50%；
left：50%;
transform：translate（-50%，-50%）;
3、使用flex布局，好吧，是不是很眼熟，没错，flex在图片居中上已经发挥了他的效果，如今它又在此袭来，是不是很有魅力呢？
请注意，最后一个方法，如果使用后，不仅垂直居中，横向也会居中哦！
以上是关于如何让块元素居中的主要内容，如果未能解决你的问题，请参考以下文章