自适应响应式不固定高度宽度时div图片或者其他元素上下左右居中的css方法
2020-10-18 20:10:10 来源：夏易网络 评论：0 点击：
自适应响应式网页布局时往往不能设定死高度和宽度，在宽高都没有设置固定数值时如何让元素上下左右居中呢？
左右居中比较简单 一般用 text-align:center 或者 margin:0px auto;
上下居中其实可以使用表格，如果不用表格的话可以使用 css 属性 display:table和 display:table-cell以及vertical-align:middle;使得div具有表格上下居中的属性
这里不管是文字内容还是图片或者其他元素都会上下居中
左右居中比较简单 一般用 text-align:center 或者 margin:0px auto;
上下居中其实可以使用表格，如果不用表格的话可以使用 css 属性 display:table和 display:table-cell以及vertical-align:middle;使得div具有表格上下居中的属性
.abc{ width:100%; height:100%; display:table;}
.x{ width:100%; height:100%; display:table-cell; vertical-align:middle;}
<div class="abc">
<div class="x">这里的内容会上下居中</div>
</div>
这里不管是文字内容还是图片或者其他元素都会上下居中
