css實現水平垂直居中的4種方法

hearaway 發布于2019-08-29 18:32 / 1992人閱讀

摘要：結構已知元素的寬度和高度設置為自身高度的一半這個方法可以實現自適應未知元素的高度和寬度使用的來實現注意這里需要設置高度來查看垂直居中效果

html結構：

1. 已知元素的寬度和高度：

.item {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -75px; /* 設置margin-left / margin-top 為自身高度的一半 */
    margin-left: -75px;
}

.item {
    position: absolute;
    margin:auto;
    left:0;
    top:0;
    right:0;
    bottom:0;
}

/* 這個方法可以實現自適應 */

2. 未知元素的高度和寬度：

.item {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 使用css3的transform來實現 */
}

.parent {
    display: flex;
    justify-content:center;
    align-items: center;
    background: #AAA;
    height: 300px;   /* 注意這里需要設置高度來查看垂直居中效果 */
}

GPU云服務器云服務器水平垂直居中實現垂直居中 html的水平居中三種實現方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114396.html

CSS垂直居中，你會多少種寫法？

摘要：如果我們直接可以計算出正確的和值，豈不是一次到位函數正有此功能，當然我們需要知道子元素的寬高效果是一個作用于內聯元素的屬性。內聯元素的特性是會和其它內聯元素或者文字在同一行顯示，但是默認情況下是與父元素基線對齊的。 ??CSS控制居中是前端開發中非常常用的布局技能，本文列出幾種CSS控制元素居中的幾種方法。??談及HTML元素居中展示，涉及到水平居中和垂直居中，以及水平垂直居中。由于H...

caohaoyu 2019-08-29 18:43 評論0 收藏0
【基礎】這15種CSS居中的方式，你都用過哪幾種？

摘要：水平居中內聯元素水平居中利用可以實現在塊級元素內部的內聯元素水平居中。此方法對內聯元素內聯塊內聯表元素水平居中都有效。核心代碼演示程序演示代碼垂直居中單行內聯元素垂直居中通過設置內聯元素的高度和行高相等，從而使元素垂直居中。簡言 CSS居中是前端工程師經常要面對的問題，也是基本技能之一。今天有時間把CSS居中的方案匯編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。...

Apollo 2019-08-30 14:15 評論0 收藏0
【基礎】這15種CSS居中的方式，你都用過哪幾種？

摘要：水平居中內聯元素水平居中利用可以實現在塊級元素內部的內聯元素水平居中。此方法對內聯元素內聯塊內聯表元素水平居中都有效。核心代碼演示程序演示代碼垂直居中單行內聯元素垂直居中通過設置內聯元素的高度和行高相等，從而使元素垂直居中。簡言 CSS居中是前端工程師經常要面對的問題，也是基本技能之一。今天有時間把CSS居中的方案匯編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。...

Scholer 2019-08-02 16:14 評論0 收藏0
【基礎】這15種CSS居中的方式，你都用過哪幾種？

摘要：水平居中內聯元素水平居中利用可以實現在塊級元素內部的內聯元素水平居中。此方法對內聯元素內聯塊內聯表元素水平居中都有效。核心代碼演示程序演示代碼垂直居中單行內聯元素垂直居中通過設置內聯元素的高度和行高相等，從而使元素垂直居中。簡言 CSS居中是前端工程師經常要面對的問題，也是基本技能之一。今天有時間把CSS居中的方案匯編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。...

mayaohua 2019-08-29 18:44 評論0 收藏0
16種水平居中垂直居中方法

摘要：原文鏈接水平居中若是行內元素給其父元素設置即可實現行內元素水平居中若是塊級元素該元素設置即可若子元素包含屬性為了讓子元素水平居中則可讓父元素寬度設置為并且配合作如下設置是中給屬性新加的一個屬性值它配合可以輕松實現水平居中原文鏈接水平居中 1) 若是行內元素, 給其父元素設置 text-align:center,即可實現行內元素水平居中.2) 若是塊級元素, 該元素設置 margin...

jerry 2019-08-30 15:54 評論0 收藏0
CSS實現水平垂直居中的1010種方式（史上最全）

摘要：劃重點，這是一道面試必考題，很多面試官都喜歡問這個問題，我就被問過好幾次了要實現上圖的效果看似很簡單，實則暗藏玄機，本文總結了一下實現水平垂直居中的方式大概有下面這些，本文將逐一介紹一下，我將本文整理成了一個倉庫，歡迎大家僅居中元素定寬高適劃重點，這是一道面試必考題，很多面試官都喜歡問這個問題，我就被問過好幾次了 showImg(https://segmentfault.com/im...

YuboonaZhang 2019-08-29 16:45 評論0 收藏0