如何让一个浮动元素既水平又垂直居中
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何让一个浮动元素既水平又垂直居中相关的知识，希望对你有一定的参考价值。
2016年3月22日
让一个普通标签居中很容易，使用div {margin:0 auto}然后利用css可以自动计算元素左右的宽度就可以了
div {margin:0 auto;}
但是让一个浮动元素居中的话，却是无法通过这种形式居中的，因为浮动元素会自动跑到浮动的方向上的最边上，设置的外边框auto根本不起作用。
这时我们可以先把这个元素的位置设置为relative，这样的话就可以通过left属性来将它相对于父元素左边框的距离改为50%，当然这样还是不能实现水平居中的目标，因为元素有自己的宽度，所以将此元素的左外边距改为元素宽度的一半的负值，这样就可以实现元素水平居中了。使用同样的原理，我们可以实现垂直居中。但是垂直居中还有一个隐藏的坑：如果此元素的父元素为body的话，需要先将body的高度设置为100%，这样才能实现垂直居中，具体原理可以参考：全屏品字布局及height:100%的坑。
talk is cheap，here is the code:
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> * { margin: 0; padding:0; } html , body { height:100%; } .div { width:200px; height:100px; background-color: pink; float:left; position:relative; border:1px solid black; margin:-50px 0 0 -100px; top:50%; left:50%; } </style> </head> <body> <div class = "div"> </div> </body> </html>
以上是关于如何让一个浮动元素既水平又垂直居中的主要内容，如果未能解决你的问题，请参考以下文章