浅谈 CSS 垂直居中的几种方法

  • Z时代
  • 2024-01-10
  • 分类：综合

用css垂直居中元素往往给设计人员带来麻烦。然而，存在用于垂直定心的各种方法，并且每种方法都相当容易使用。今天我想介绍其中的6种方法。

1.图片水平垂直居中

html:
     <div class="parent">
	    <div class="child">
		   <img src="xxx/demo.jpg">
		</div>
	  </div>
css:
	 .parent{
	    display: table
	 }
	 .parent .child {
	    display: table-cell;
		*display: inline-block;
		text-align: center;
		vertical-align: middle;
	 }
	 .parent .child img{
	    border: none;
		width: 200px;
		height: 200px;
		vertical-align: middle;
	 }

注： IE修复: *display: inline-block;

由于 vertical-align 属性与表格一起使用，我们将父 DIV 设置为 display: table, 并将子 DIV 设置为单元格 display: talbe-cell.然后我 们可以安全的使用vertical-align：middle 来垂直单元格中的内容.此方法适用于多行文本，容器DIV随内容动态增长，不幸的是不工作于IE6、IE7中（该死的IE，哈哈）

2. 绝对定位和垂直拉伸

  html:
     <div class="parent">
        <div class="child">content here</div>
     </div>
  css:
      .parent {
	     position: relative;
	  }
	  .parent  .child {
	     position: absolute;
		 top: 0;
		 right: 0;
		 bottom: 0;
		 left: 0;
		 margin: auto;
		 width: 50%;
		 height: 50%;
	  }

注： 子 DIV 处于父 DIV 中，它的顶部，底部，左侧，右侧的值都设为0。因为子DIV的高度和宽度都设置为小于父DIV的高度和宽度，所以这种定位是不行的。将子DIV的4个边框都设置为auto会在顶部和底部以及左右两侧产生同等的边距，这导致子 DIV 同时水平和垂直居中，不幸的是IE7以下不支持。

3.填充

html:
	<div class="parent">
        <div class="child">content here</div>
	</div>
css:
	.parent {
	   padding: 5% 0;
	}
	.parent .child {
	   padding: 10% 0;
	}

注：相同顶部和底部填充用于使子 DIV 在父 DIV 居中，并使子 DIV 中的文本居中。padding 设置为 %，允许两个DIV动态增长。

如果任何元素的高度都设置绝对测量，则需要一些数学知识来确保顶部和底部填充相同。虽然这个方法是在容器上设置paddings，你可以翻转事物，并在包含的元素中设置边距

4.lineHeight

html:
   <div class="parent">
     <div class="child">content here</div>
   </div>
css:
   .child {
		line-height: 200px;
	}

注：垂直居中通过给子 div（包含文本的那个）一个大于字体大小的行高来实现。有些也设置一个高度等于这个div上的行高，但我还没有发现它的必要。这将工作于垂直居中一行文本，但不会工作在多行文本。

5.定位和负边距

html:
	<div class="parent">
		<div class="child"></div>
	</div>
css:
   .parent{ 
       position: relative
	}
	.parent .child { 
      position: absolute;
	  top: 50%;
	  left: 50%;
	  width: 200px;
	  height: 200px;
	  margin: -100px 0 0 -100px;
	 }

注: 子DIV通过定位和边距定位在父 DIV 中心，通过将子DIV的顶部和左侧的值设为50%，子DIV的左上角位于父DIV的中心。负顶部和左侧等于元素高度和宽度的一半，向上拉伸子DIV让它处于父DIV中心。此方法最适合于块级元素，并且它需要知道子DIV的维度。

6.浮动分区

html:
   <div class="parent">
	   <div class="floater"></div>;
	    <div class="child">content here</div>
	 </div>
css:
   .parent{
	     height: 200px;
	  }
	  .parent .floater {
	     float: left;
		 height: 50%;
		 width: 100%;
		 margin-bootm: -50px;
		 border: 1px solid red;
	  }
	  .parent .child {
	    clear: both;
	    height: 100px;
	    outline: 1px solid yellow;
	  }

注：这里，一个空的 div 设置为父 div 的一半高度并向左（或右）浮动。我们想要居中的div然后被清除，所以它的顶边将直接位于浮动 div 的底边下方。为了使子div的垂直中心向上，我们为浮动div添加一个负的下边距，它等于子 div 的一半高度。

以上是 浅谈 CSS 垂直居中的几种方法 的全部内容， 来源链接： utcz.com/z/264062.html

回到顶部