html的幾種水平垂直居中的方式（基礎）

Songlcy 發布于2019-08-30 15:44 / 3566人閱讀

摘要：前言我們在編寫馬過程中，想必大家對水平垂直居中的方法了解并不多。所以我給大家總結式的列出幾種常用的水平垂直居中的方法。

前言
我們在編寫馬過程中，想必大家對水平垂直居中的方法了解并不多。所以我給大家總結式的列出幾種常用的水平垂直居中的方法。

第一種方法





    d第一種



   .Centered1{
            background-color: #800070;
            width: 100%;
            height:500px;
            position: relative;
        }
    .Centered1 p{
            width: 200px;
            height: 200px;
            background-color: deeppink;
            line-height: 200px;
            text-align: center;
            position: absolute;
            left: 0;
            bottom: 0;
            right:0;
            top: 0;
            margin: auto;
        }

第二種方法





    d第二種



/*第二種方法水平垂直居中*/
    .Centered2{
            background-color: #ef8518;
            width: 100%;
            height: 500px;
            position: relative;
        }
    .Centered2 p {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color:red;
            line-height: 200px;
            text-align: center;
            left: 50%;
            top:50%;
            margin-left:-100px;
            margin-top: -100px;
        }

第三種方法





    d第三種



/*第三種方法水平垂直居中*/
    .Centered3{
            background-color: dimgrey;
            width: 100%;
            height: 500px;
            position: relative;
        }
    .Centered3 p {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color:darkorange;
            line-height: 200px;
            text-align: center;
            left: 50%;
            top: 50%;
            transform:translate(-50%,-50%);
        }

第四種方法





    d第四種



/*第四種方法水平垂直居中,老版本flex布局*/
    .Centered4{
            background-color: #FF4444;
            width: 100%;
            height: 500px;
            display: -webkit-box;
            -webkit-box-pack:center;
            -webkit-box-align: center;
        }
    .Centered4 p {
            width: 200px;
            height: 200px;
            background-color:cadetblue;
            line-height: 200px;
            text-align: center;
        }

第五種方法





    d第五種



/*第五種方法水平垂直居中,新版本的flex水平垂直居中*/
    .Centered5{
            background-color: darkslateblue;
            width: 100%;
            height: 500px;
            display: flex;
            justify-content:center;
            align-items: center;
        }
    .Centered5 p {
            width: 200px;
            height: 200px;
            background-color:fuchsia;
            line-height: 200px;
            text-align: center;
        }

GPU云服務器云服務器 js繼承的幾種方式服務器請求的幾種方式 java創建對象的幾種方式水平垂直居中

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

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

使一個div垂直+水平居中的幾種方法

摘要：前幾天去一家互聯網公司面試，面試官問到了這個應該算是比較簡單的問題，在我自認為回答正確時，才知道這道題的答案有很多種，下面就讓我們一起來探討一下這個問題思路絕對定位居中原始版這個是我回答出來的，也是被各位所熟知的一種方法，設外層相對定位，內前幾天去一家互聯網公司面試，面試官問到了這個應該算是比較簡單的問題，在我自認為回答正確時，才知道這道題的答案有很多種，下面就讓我們一起來探討一下這...

joyqi 2019-08-29 11:04 評論0 收藏0
前端培訓-初級階段（13、18）

摘要：年月歐洲計算機制造商協會發表了標準，它是的一個擴延，它也被稱為年月首版年月日截止發布日期，的官方名稱是，國際意在更頻繁地發布包含小規模增量更新的新版本，下一版本將于年發布，命名為。前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術水平，打牢基礎知識的...

YorkChen 2019-08-23 16:22 評論0 收藏0
(面試題)垂直居中的幾種實現方式

摘要：尤其是在實際頁面中，有很多特殊的場景，導致水平居中實現起來比較麻煩。這篇文章旨在紀錄一些我知道的居中方式。以一道經典面試題為例一個的在一個水平垂直居中，用實現。首先定義元素層和垂直居中無關的樣式直接定義在里。相比較水平居中，垂直居中比較復雜點。尤其是在實際頁面中，有很多特殊的場景，導致水平居中實現起來比較麻煩。這篇文章旨在紀錄一些我知道的居中方式。以一道經典面試題為例：一個200*2...

cheukyin 2019-08-30 11:18 評論0 收藏0
CSS垂直居中，你會多少種寫法？

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

caohaoyu 2019-08-29 18:43 評論0 收藏0
web開發常用的幾種居中形式

摘要：一水平居中二水平垂直居中三針對文本內容的垂直居中一水平居中要居中的元素有屬性給元素添加代碼演示此外，和產生同樣效果的原因移步要居中的元素沒有屬性給添加屬性，并在的外面包一層且添加是讓塊狀里面的元素比如文字居中。一水平居中二水平垂直居中三針對文本內容的垂直居中一水平居中要居中的元素A有width屬性給元素A添加 margin：0,auto；(代碼演示) showImg(h...

zqhxuyuan 2019-08-21 16:23 評論0 收藏0