請在后臺配置參數,參數名稱:topads
前端開發 HTML5 CSS3 HTML CSS JavaScript jQuery Bootstrap

用CSS讓DIV層水平居中兩種方法

CSS HTML我幫您 1年前  5625次瀏覽
方法一、用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總是在中間的!

發表評論

2017怎样手机上赚钱