中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

如何實現div標簽的水平居中和垂直居中

發布時間:2020-07-13 16:12:02 來源:億速云 閱讀:374 作者:Leah 欄目:web開發

如何實現div標簽的水平居中和垂直居中?很多新手對此不是很清楚,為了幫助大家解決這個難題,下面小編將為大家詳細講解,有這方面需求的人可以來學習下,希望你能有所收獲。

在前端開發時,經常會遇到需要居中的情形,居中分2種情況,一個是水平居中,一個是垂直居中,總結一下用到的方法。

水平居中實現

margin:0 auto

auto表示外邊距左右距離相同即可實現水平居中的效果

垂直居中實現

1、最常用到的一種方式是根據偏移量來實現

<style>
    *{margin: 0;padding: 0;}
    .content{
        position: relative;
        width: 300px;
        height: 300px;
        background-color: #000;
        margin: 300px auto;
    }
    .beat{
        width: 100px;
        height: 100px;
        background-color: #ff0000;
        position: absolute;
        left:50%;
        top:50%;
        margin-top: -50px;
        margin-left: -50px;
    }
</style>

<div class="content">
    <div class="beat">
    </div>
</div>

如何實現div標簽的水平居中和垂直居中

紅色方塊位于黑色方塊的中心位置,實現了垂直居中效果

left,top分別設置50%,紅色方塊的起始點位于垂直居中的位置,效果如下圖:

如何實現div標簽的水平居中和垂直居中

想要實現方塊內部中心點垂直居中,還要加上偏移量,margin-top的值為紅色框heigh/2,margin-left的值為紅色框width/2。

2、讓p塊里的多行文字垂直居中,可以用table和table-cell來實現

<style>
    *{margin: 0;padding: 0;}
    .content{
        width: 300px;
        height: 300px;
        background-color: #000;
        margin: 300px auto;
        color: #fff;
        display: table;
        text-align: center;
    }
    .content p{
        display: table-cell;
        height: 100px;
        vertical-align: middle;
    }
</style>

<div class="content">
   <p>垂直居中是布局中十分常見的效果之一垂直居中是布局中十分常見的效果之一垂直居中是布局中十分
       常見的效果之一垂直居中是布局中十分常見的效果之一</p>
</div>

如何實現div標簽的水平居中和垂直居中

display: table使塊狀元素成為一個塊級表格,display: table-cell;子元素設置成表格單元格,vertical-align: middle;使表格內容居中顯示,即可實現垂直居中的效果

看完上述內容是否對您有幫助呢?如果還想對相關知識有進一步的了解或閱讀更多相關文章,請關注億速云行業資訊頻道,感謝您對億速云的支持。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

云安县| 四子王旗| 石渠县| 西峡县| 柳林县| 宽城| 名山县| 拜泉县| 镇宁| 屏南县| 潼南县| 扎鲁特旗| 新邵县| 乡宁县| 延津县| 常宁市| 蓝田县| 策勒县| 平遥县| 洱源县| 罗平县| 全州县| 宁阳县| 长泰县| 大田县| 呼和浩特市| 黄大仙区| 聂拉木县| 常宁市| 玉屏| 会理县| 赣榆县| 通道| 武冈市| 清水县| 贵定县| 永城市| 元谋县| 高雄市| 富阳市| 井冈山市|