欢迎使用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;