很简单的一个方法,只是很少人关注,直接上代码吧:
<template>
<div>
<div class="parent">
<div class="son"></div>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="less">
.parent{
width: 300px;
height: 300px;
background-color: blue;
display: table-cell;
vertical-align: middle;
text-align: center;
.son{
width: 100px;
height: 100px;
background-color: #fff;
display: inline-block;
}
}
</style>
运行效果如下:
起作用的四行代码如下:
display:table-cell指让标签元素以表格单元格的形式呈现，使元素类似于td标签。IE8+及现代版本的浏览器都支持此属性，IE6/7不支持（可用其他方法实现类似效果）。同样，display：table-cell属性也会被float，position：absolute等属性破坏效果，应避免同时使用。
vertical-align: middle;让子元素垂直居中.
text-align: center;让子元素水平居中.
display: inline-block; 让子元素转变为行内块元素.
