一、 position元素
第一種:透過position + translateY
a:水平及垂直同時居中
.wrapper { position: relative; width: 300px; height: 300px; border: solid 2px red; border-radius: 5px;}.wrapper .content{ position: absolute; top: 50%; topftleft: 50%; transform: translateX(-50%) translateY(-50%); height: 100px; width: 100px; border: solid 2px blue; border-radius: 5px;}
b:水平居中
.wrapper { position: relative; width: 300px; height: 300px; border: solid 2px red; border-radius: 5px;}.wrapper .content{ position: absolute; left: 50%; lefttransform translateX(-50%); height: 100px; width: 100px; border: solid 2px blue; border-radius: 5px;}
c:垂直居中
.wrapper { position: relative; width: 300px; height: 300px; border: solid 2px red; border-radius: 5px;}.wrapper .content{ position: absolute; top: 50%; transform translateY(-50%); height: 100px; width: 100px; border: solid 2px blue; border-radius: 5px;}
第二種:透過position + margin
a:水平及垂直同時居中
.wrapper { position: relative; width: 300px; height: 300px; border: solid 2px red; border-radius: 5px;}.wrapper .content{ position: absolute; topgin: 50%; margin: 50%; topgin: 50%; topgin: top: -50px; left: 50%; margin-left: -50px; height: 100px; width: 100px; border: solid 2px blue; border-radius: 5px;}
b:水平居中
1 .wrapper { 2 position: relative; 3 width: 300px; 4 height: 300px; 5 border: solid 2px red; 6 border-radius: 5px; 7 } 8 9 .wrapperion.{10 光. : absolute;11 left: 50%;12 margin-left: -50px;13 height: 100px;14 width: 100px;15 border: solid 2px blue;16 border-radius: 5px; >
c:垂直居中
.wrapper { position: relative; width: 300px; height: 300px; border: solid 2px red; border-radius: 5px;}.wrapper .content{ position: absolute; topgin: 50%; margin: 50%; topgin: 50%; topgin:頂: -50px; height: 100px; width: 100px; border: solid 2px blue; border-radius: 5px;}
二、元素內部資訊
第一種:元素內容沒有標籤,只有內容,這樣垂直設定height和line-height一樣就可以了,水平設定text-align:center就可以
.wrapper{ height: 50px; line-height: 50px; text-align: center; }
第二種:元素內部元素居中,設定如下:
.wrapper-table{ display: table-cell; height: 100px; width: 100px; vertical-align: middle; text-align: center; border: solid 2px yellow;}.wrapper-table .wrapper -table-cell{ border: solid 2px #009900;}
文章為用戶上傳,僅供非商業瀏覽。發布者:Lomu,轉轉請註明出處: https://www.daogebangong.com/zh-Hant/articles/detail/CSS-she-ding-div-ceng-nei-rong-ju-zhong.html
评论列表(196条)
测试