尺寸自适应的元素垂直水平居中

尺寸自适应的元素垂直水平居中:

如果子元素的尺寸是固定的,那么将其设置为垂直水平居中将会是比较容易的事情,这里就不做介绍了,具体可以参阅css实现div水平垂直居中代码一章节。 如果子元素的尺寸不是固定的,那么将其设置为垂直居中就有点麻烦了,下面看一段代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css">
.middle{
  height:300px;
  width:300px;
  border:1px solid;
  display:table-cell;
  text-align:center;
  vertical-align:middle;
}
.in{
  background-color:red;
  height:auto;
  width:auto;
  min-width:0px;
  min-height:0px;
  display:inline;
}
</style>
</head>
<body>
<div class="middle">
  <div class="in">内容自适应水平垂直居中</div>
</div>
</body>
</html>

代码实现了我们想要的功能,但是美中不足的是,在低版本的IE浏览器中并不兼容,不过随着时间的推移,低版本浏览器退出市场之后就可以大量使用了,当然使用js能够实现兼容所有浏览器,具体可以参阅兼容所有浏览器长宽自适应元素垂直水平居中一章节。

原文地址是:http://www.51texiao.cn/HTML5jiaocheng/2015/0521/2140.html

你可能感兴趣的:(自适应)