jsp 中div居中_让div在屏幕中居中(水平居中+垂直居中)
生活随笔
收集整理的這篇文章主要介紹了
jsp 中div居中_让div在屏幕中居中(水平居中+垂直居中)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
html代碼
<div class="main">
<h1>測試</h1>
</div>
方法一:div使用絕對布局,設置margin:auto,并設置top、left、right、bottom的值相等即可,不一定要都是0。
方法二:絕對布局,用margin來調整。
方法三:絕對布局,讓left和top都是50%,這在水平方向上讓div的最左與屏幕的最左相距50%,垂直方向上一樣,所以再用transform向左(上)平移它自己寬度(高度)的50%。
這里補充一下知識點:translate()函數是css3的新特性.在不知道自身寬高的情況下,可以利用它來進行水平垂直居中。當使用:top: 50%;left: 50%;是以左上角為原點,故不處于中心位置。translate(-50%,-50%) 作用是,往上(x軸),左(y軸)移動自身長寬的 50%,以使其居于中心位置。與負margin-left和margin-top實現居中不同的是,margin-left必須知道自身的寬高,而translate可以在不知道寬高的情況下進行居中,tranlate()函數中的百分比是相對于自身寬高的百分比,所以能進行居中。
效果圖:
總結
以上是生活随笔為你收集整理的jsp 中div居中_让div在屏幕中居中(水平居中+垂直居中)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: linux脚本安装gcc,在Linux系
- 下一篇: 基于java(springboot+my