块级元素在块级元素垂直左右居中 和(文字加图片水平居中)

垂直左右居中的几种方法

方法一:绝对定位(子元素可以未知高度和宽度)

  html

css .div1{ width: 200px; height: 200px; position: relative; background-color: black; } .div2{ margin: auto; /*这个margin很关键,没有就不能居中了*/ position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: red; width: 100px; height: 100px; }

方法二:做单元格处理(父元素需要输入固定高度)

html

css .div1{ width: 200px; height: 200px; /*需要写固定高度*/ background-color: black; display:table-cell; vertical-align:middle; text-align: center; } .div2{ background: red; width: 100px; height: 100px; display:inline-block; }

方法三:flex布局(子元素也可以未知高度和宽度)

html

css .div1{ width:200px; height:200px; background-color: black; display:flex; justify-content:center; align-items:center; } .div2{ width:100px; height:100px; background-color: red; }

还有方法就是子元素绝对定位,top 和 left 都是 50%,再用margin偏移(需要知道子元素宽高),相信大家都知道

文字加图片水平居中

把文字和图片设置 display: inline-block;vertical-align: middle;
然后给父元素设置 font-size: 0;text-align: center;

额外小插曲
其实最开始我需要div在模态框里面 垂直 左右居中,居中到是实现了,但是如果内容高度超过了屏幕,即使设置了 overflow: auto;也有一部分内容看不到。至今也没有找到一个只用css就能解决的两全其美的方法(加上js还是很容易实现)

参考文章 http://www.cnblogs.com/gwcyulong/p/6251342.html

你可能感兴趣的:(块级元素在块级元素垂直左右居中 和(文字加图片水平居中))