css居中辦法學習筆記

oylp發表於2019-02-16
CSS筆記

第一種：通過margin負值

<div class="one"></div>

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

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

缺點：
必須要固定寬高

第二種：通過margin:auto

<div class="two"></div>
.two{
    position: absolute;
    width: 100px;
    height:100px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

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

第三種：table-cell

<div class="inner">
    <div class="foo"></div>
</div>
.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佈局

第四種：行內元素居中

<div class="four">
    內容居中
</div>
.four{
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}

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

第五種：transform居中

<div class="five"></div>
.five{
    position: absolute;
    top: 50%;
    height: 50%;
    transform: translate(-50%, -50%);
}

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

第六種：偽類居中

<div class="six">
    <div class="content"></div>
</div>
.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佈局

<div class="eight">
    <div class="content"></div>
</div>
.eight{
    display: flex;
    align-items: center;
    justify-content: center;
}

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

相關文章