前端开发 HTML5 CSS3 HTML CSS JavaScript jQuery Bootstrap

用CSS让DIV层水平居中两种方法

CSS HTML我帮您 1年前  0次浏览
方法一、用CSS让DIV层水平居中
对需要水平居中的DIV层添加以下属性:
margin:0 auto;
相当于
margin-left: auto;
margin-right: auto;

方法二、用定位方法居中
css怎样使div层水平居中和垂直居中:这里使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二。 示例样式:


解释:这个方法以前只是知道,但一次一个朋友问我方法的原理,那时我没有答上来,前几天看了一文章后才突然明白了它的原理!以前我的理解是先左边界-370px,然后是想position问题,所以始终想不通。其实我们可以反过一想先定位后边界,这样就很容易理解了。position:absolute;它是对浏览器定位的,left:50%;正好在中间的位置上,也就是这个DIV块左边界上处于游览器的中间位置,在加入样式margin-left:-370px,这个370是算出来的,它恰好是div740的一半,我们让DIV往回走370,这样DIV的中线与浏览器的中线重合所以看到的DIV总是在中间的!

发表评论