css字體居中:CSS 設定div層內容居中-字體教程免费ppt模版下载-道格办公
投稿
  1. JustNews首頁
  2. 字體教程
  3. CSS 設定div層內容居中

CSS 設定div層內容居中

作者: 道格資源 • • 字體教程 • 瀏覽量 1018

一、 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

贊 (810)
打賞 支付宝扫一扫 支付宝扫一扫
Lomu ︶￣Ｓs°╮ 專欄作者
48 196
single-end

相關推薦