欢迎来到资源库(www.zyku.net)

HTML/Xhtml

当前位置:首页 > 网页制作 > HTML/Xhtml

HTML/CSS:div居中和div内部元素垂直居中

时间:2017-06-15|栏目:HTML/Xhtml|点击:

div居中

div水平和垂直居中,text-align和vertical-align不起作用,因为标签div没有这两个属性,所以再css中设置这两个值不能居中的效果

1. div水平居中:设置margin的左右边距为自动

div
  {
  margin:0 auto;
  }

6种元素垂直居中的方法

利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可。本文收集了六种利用css进行元素的垂直居中的方法,每一种适用于不同的情况,在实际的使用过程中选择某一种方法即可。

1.Line-Height Method

HTML/CSS:div居中和div内部元素垂直居中

适用:单行文本垂直居中

代码:

html

<div id="parent">
  <div id="child">Text here</div>
  </div>

css

#child {
  line-height: 200px;
  }

垂直居中一张图片,代码如下

html

<div id="parent">
  <img src="image.png" alt="" />
  </div>

css

#parent {
  line-height: 200px;
  }
  #parent img {
  vertical-align: middle;
  }

2.CSS Table Method

HTML/CSS:div居中和div内部元素垂直居中

适用:通用

代码:

html

<div id="parent">
  <div id="child">Content here</div>
  </div>

css

#parent {display: table;}
  #child {
  display: table-cell;
  vertical-align: middle;
  }

低版本 IE fix bug:

#child {
  display: inline-block;
  }

3.Absolute Positioning and Negative Margin

HTML/CSS:div居中和div内部元素垂直居中

适用:块级元素

代码:

html

<div id="parent">
  <div id="child">Content here</div>
  </div>

css

#parent {position: relative;}
  #child {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 30%;
  width: 50%;
  margin: -15% 0 0 -25%;
  }

4.Absolute Positioning and Stretching

HTML/CSS:div居中和div内部元素垂直居中

适用:通用,但在IE版本低于7时不能正常工作

代码:

html

<div id="parent">
  <div id="child">Content here</div>
  </div>

css

#parent {position: relative;}
  #child {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 50%;
  height: 30%;
  margin: auto;
  }

5.Equal Top and Bottom Padding

HTML/CSS:div居中和div内部元素垂直居中

适用:通用

代码:

html

<div id="parent">
  <div id="child">Content here</div>
  </div>

css

#parent {
  padding: 5% 0;
  }
  #child {
  padding: 10% 0;
  }

6.Floater Div

HTML/CSS:div居中和div内部元素垂直居中

适用:通用

代码:

html

<div id="parent">
  <div id="floater"></div>
  <div id="child">Content here</div>
  </div>

css

#parent {height: 250px;}
  #floater {
  float: left;
  height: 50%;
  width: 100%;
  margin-bottom: -50px;
  }
  #child {
  clear: both;
  height: 100px;
  }

以上就是六种方法,可以在实际的使用过程中合理选择,参考文章《vertical-centering》

原文链接:http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E7%9A%84-6%E7%A7%8D%E6%96%B9%E6%B3%95/

(资源库 zyku.net)

上一篇:HTML中meta的作用

栏    目:HTML/Xhtml

下一篇:html中实现数据的显示和隐藏

本文标题:HTML/CSS:div居中和div内部元素垂直居中

本文地址:http://www.zyku.net/xhtml/1402.html

推荐教程

关于我们 | 版权申明 | 寻求合作 |

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:95148658 | 邮箱:mb8#qq.com(#换成@)

沪ICP备15050984号-2