歡迎使用CSDN-markdown編輯器

元素垂直居中實現

1.爲元素設置相同的上下內邊距

<div>content</div>

div{
    background:#ccc;
    padding:10% 0;
    }

2.爲元素設置行高

<div>content</div>

div{
    background:#ccc;
    line-height:55px;
    }

爲元素設置行高只適用於單行元素的垂直居中。

3.table-cell屬性

<div class="parent">
    <div class="child">content</div>
</div>

.parent{
    display:table;
    }
.child{
    display:table-cell;
    vertical-align:middle;
    background: #ccc;
    }

該方法只適用於塊級元素

4.定位
爲父元素設置position ：relative；
爲需要居中的元素設置 position： absolute； top:50%;

<div class="parent">
    <div class="child">content</div>
</div>

.parent{
    position:relative;
    height:200px;
    background:#ccc;
    }
.child{
    position:absolute;
    top:50%;
    background:orange;
    }

由於塊元素本身的高度，元素看起來仍然是不居中的，此時可以爲元素設置

transform:translateY(-50%);

當塊級元素設置了高的時候，也可以爲元素設置一個負的上外邊距

height:60px;
margin-top:-30px;