CSS----布局常见问题

如何实现网页元素的垂直居中布局

weixin_30687587

于 2015-09-23 18:23:00 发布

阅读量49

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/atuan/p/CSS.html

本文详细介绍了如何使用CSS实现一个宽高为50px的div元素的左右垂直居中布局，并提供了实现思路及代码示例。此外，还讲解了如何将一个div元素在另一个div容器内实现居中布局的方法。

1.一个宽高为50px的div，如何实现左右垂直居中？

　　实现思路：首先给div设position:absolute,实现绝对定位，然后设置top与left值均为50%；这样div就在大致中间的位置了，这里说大致，是因为此时div分别向下向右偏移了0.5倍的height和width。这时再设置margin-left:-(1/2)width；margin-top:-(1/2)height就可以啦(*^__^*)

.tocenter{position:absolute;width:50px;height: 50px;background: #0066D5;
                margin-left:-25px; margin-top:-25px;top:50%;left: 50%;　　}

　　扩展：如果实现div1在div2(外层div)中居中怎么做呢？

　　实现思路：嗯。。。这个时候只要给div2加上position：relative就可以了。

当当当当~~~另一种思路

转载于:https://www.cnblogs.com/atuan/p/CSS.html