如何居中一个元素（终结版）

一、水平居中

1.行内元素水平居中

• 利用text-align:center可以实现块级元素内部的行内元素水平居中；
• 若内部包含着一个块级元素，可以先将其由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中
  

  <div class="parent">
    <div class="child">CSDN</div>
  </div>

.parent {
   text-align: center;
 }
 .child {
   display: inline-block;
 }

2.块级元素的水平居中

2.1 将该块级元素左右外边距margin-left和margin-right设置为auto

.child {
  width: 100px;//确保该块级元素定宽
  margin: 0 auto;
}

2.2 table+margin

将元素设置为块级表格来显示，然后再设置为水平居中，其中display:table在表现上类似block元素，但是宽度为内容宽。

 .child {
   display: table;
   margin: 0 auto;
 }

2.3 absolute+transform

先将父元素设置为相对定位，再将子元素设置为绝对定位，向右移动子元素，移动距离为父容器的一半，最后通过向左移动子元素的一半宽度以达到水平居中。

• 不过transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀。

.child {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}
.parent {
  position:relative;
}

2.4 flex+justify-content

通过CSS3中的布局利器flex中的justify-content属性来达到水平居中。

.parent {
  display: flex;
   justify-content:center;
 }

2.5flex+margin

通过flex将父容器设置为为Flex布局，再设置子元素居中。

 .parent {
    display: flex;
  }
  .child {
    margin:0 auto;
  }

3 多块级元素水平居中

3.1flex布局

利用弹性布局(flex)，实现水平居中，其中justify-content 用于设置弹性盒子元素在主轴（默认横轴）方向上的对齐方式

<div class="parent">
    <div>C</div>
    <div>S</div>
    <div>D</div>
    <div>N</div>
 </div>

.parent {
  display: flex;
  justify-content: center;
}

3.2inline-block

将要水平排列的块状元素设为display:inline-block，然后在父级元素上设置text-align:center，达到与上面的行内元素的水平居中一样的效果。

.parent {
text-align: center;
}
.parent>div {
display: inline-block;
}

4.浮动元素水平居中

• 对于定宽的浮动元素，通过子元素设置relative + 负margin
• 对于不定宽的浮动元素，父子容器都用相对定位
• 通用方法(不管是定宽还是不定宽)：flex布局

4.1 定宽的非浮动元素

通过给子元素设置relative、margin(负的)

 <div class="parent">
    <span class="child" style="float: left;width: 500px;">dom</span>
  </div>

.child {
   position:relative;
   left:50%;
   margin-left:-250px;
}

4.2 不定宽的浮动元素

<div class="box">
    <p>我是浮动的</p>
    <p>我也是居中的</p>
</div>

.box{
  float:left;
  position:relative;
  left:50%;
}
p{
  float:left;
  position:relative;
  right:50%;
}

4.3 flex布局

<div class="parent">
  <span class="chlid">dom</span>
</div>

.parent {
    display:flex;
    justify-content:center;
}
.chlid{
    float: left;
    width: 200px;//有无宽度不影响居中
}

5.绝对定位

<div class="parent">
    <div class="child">dom</div>
</div>

.parent{
  position:relative;
}
.child{
   position: absolute; /*绝对定位*/
   width: 200px;
   height:100px;
   background: yellow;
   margin: 0 auto; /*水平居中*/
   left: 0; /*此处不能省略，且为0*/
   right: 0;/*此处不能省略，且为0*/
}

二、垂直居中

1.单行内联元素垂直居中

.parent {
     height: 100px;
     line-height: 120px;
     border: 2px dashed springgreen
   }

2.多行内联元素垂直居中

2.1 flex

利用flex布局实现垂直居中，其中flex-direction: column定义主轴方向为纵向。这种方式在较老的浏览器存在兼容性问题。

<div class="parent">
    <p>利用flex布局实现垂直居中，其中flex-direction: column定义主轴方向为纵向。这种方式在较老的浏览器存在兼容性问题。</p>
</div>

.parent { 
   height: 140px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   border: 2px dashed #f69c55;
}

2.2 table

  <div class="parent">
    <p class="child">利用表布局的vertical-align: middle可以实现子元素的垂直居中</p>
  </div>

.parent {
  display: table;
  height: 140px;
  border: 2px dashed #f69c55;
}

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

未完待续…