css实现水平居中和垂直居中的常见方式

我们在实际工作中常会遇到需要设置居中的场景，居中分为水平居中和垂直居中。针对不同的情况又有不同的实现方式，例如行内元素和块状元素。

1. 水平居中：

   行内元素：text-align:center；//这个比较简单
   块状元素：定宽的块状元素通过设置左右margin为auto实现，例如margin：10px auto；不定宽的块状元素：加入 table 标签后按照定宽元素进行设置；设置 display: inline 后按照行内元素设置；设置position:relative left:50% 通过给父元素设置 float，然后给父元素设置position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

2. 垂直居中：
   例子1.
   对于单行文本最简单的垂直居中就是利用line-height，首先，定义整个div的高度，然后再设置line height 的值等于div高度，这样就实现了单行文本的居中效果。
   例子2.

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

   对于图片垂直居中可以利用css的vertical-align:middle实现:

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

   例子3.
   整个div 居中

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

   让id为child的div 居中实现代码：

      #parent{display:table;}
      #child {
      display:table-cell;
      vertical-align:middle;
      }
      //display:table-cell;IE8以下不支持。
      IE8以下的浏览器可以使用
      #child{
      display:inline-block;
      }

   例子4.针对div块级元素，可以使用下面的方法实现垂直居中

      HTML:
      <div id="parent">
      <div id="child">Content here</div>
      </div>
   
      css：
      #parent{
      position:relative;}
      #child {
      positon:absolute;
      top:50%;
      left:50%;
      height:30%;
      width:50%;
      margin:-15% 0 0 -25%;
      }

   设置父级position为relative；子元素postion为absolute；同时设置子元素的top为50%，水平也想居中的话，就设置left为50%

原文地址：https://www.cnblogs.com/jlfw/p/12601946.html