<strike id="q8ks0"></strike>

<del id="q8ks0"></del>

css居中辦法學習筆記

tanglijun 發布于2019-08-30 13:49 / 2846人閱讀

摘要：常用于文字對其居中第五種居中好處就是不可不用定義寬高，但是對于不兼容的瀏覽器沒有作用第六種偽類居中第八種布局同樣，會存在瀏覽器兼容問題

第一種：通過margin負值

.one{
    position: absolute;
    width: 200px;
    height: 200px;
    top:  50%;
    left: 50%;
    margin-left: -100px;
    margin-right: -100px;
    background: green;
}

優點：
基本瀏覽器都能兼容

缺點：
必須要固定寬高

第二種：通過margin:auto

.two{
    position: absolute;
    width: 100px;
    height:100px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

以上兩種方法都可以把absolute換成fixed,注意，fixed在ie下不支持

第三種：table-cell

.inner{
    width: 100px;
    height: 100px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.foo{
    display: inline-block;
    width: 50%;
    height: 50%;
}

設置了table-cell之后，父元素就變成了一個單元格
關于使用table-cee布局

第四種：行內元素居中


    內容居中

.four{
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}

這種方法只能居中行內元素。常用于文字對其居中

第五種：transform居中

.five{
    position: absolute;
    top: 50%;
    height: 50%;
    transform: translate(-50%, -50%);
}

好處就是不可不用定義寬高，但是對于不兼容css3的瀏覽器沒有作用

第六種：偽類居中

.six{
    position:aabsolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: center;
    }
.six:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    }
.six .content{
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    line-height: 40px;
    }

第八種：flex布局

.eight{
    display: flex;
    align-items: center;
    justify-content: center;
}

同樣，會存在瀏覽器兼容問題

GPU云服務器云服務器 html居中css 學習筆記學習筆記一基礎學習筆記

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

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

css居中辦法學習筆記

摘要：常用于文字對其居中第五種居中好處就是不可不用定義寬高，但是對于不兼容的瀏覽器沒有作用第六種偽類居中第八種布局同樣，會存在瀏覽器兼容問題第一種：通過margin負值 .one{ position: absolute; width: 200px; height: 200px; top: 50%; left: 50%; margin-l...

philadelphia 2019-08-01 17:51 評論0 收藏0
前端-CSS3&H5

摘要：高度模型淺識為的簡寫，簡稱為塊級格式化上下文，為瀏覽器渲染某一區域的機制，中只有和中還增加了和。并非所有的布局都會在開發中使用，但是其中也會涉及一些知識點。然而在不同的純制作各種圖形純制作各種圖形多圖預警一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 float 屬性不...

xiaolinbang 2019-08-29 14:14 評論0 收藏0
CSS學習筆記－元素水平垂直居中

摘要：前言布局中經常會遇到元素水平居中的需求今天根據以前的學習筆記以及看過的一些技術博客做個元素水平居中的小結。文字的水平垂直居中文字水平居中文字的水平垂直居中在于同高然后。前言布局中經常會遇到元素水平居中的需求,今天根據以前的學習筆記?以及看過的一些技術博客做個元素水平居中的小結。正文圖片的水平垂直居中 //圖片地址為http://static.jsbin.com/ima...

NeverSayNever 2019-08-28 18:28 評論0 收藏0
【學習筆記】CSS深入理解之line-height

摘要：內聯盒子的高度由決定，限制包含盒子的高度，兩者一致，即把內聯盒子安放在包含盒子內，排除其他外界干擾。這時候由內聯盒子模型可知，行間距是等分的，中間部分是，達到看似居中的效果。可以得到結論和設置一致，并非是完全垂直，除非為。張鑫旭的CSS深入理解之line-height學習筆記 line-height的定義行高：兩行文字基線之間的距離為何是基線：基線是定義所有字線的根本不同字體...

Stardustsky 2019-08-30 15:54 評論0 收藏0