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