css-元素居中

本文重要是汇总了关于水平居中，垂直居中，还有水平垂直居中的各种方法。

一、水平居中

1.行内元素水平居中

使用text-align:center;属性可以实现在行内元素（包括：inline,inline-block、inline-table、inline-flex）在块级父元素水平居中。

css样式:

 <style>
    .parent{
        text-align: center;
        border: 1px solid  rebeccapurple;
    }
    .inlineTable{
        display: inline-table;
    }
    .inlineflex{
        display: inline-flex;
    }
</style>

html结构：

<div class="parent">
    <span>我是inline</span>
</div>
<div class="parent">
    <p>我是inline-block</p>
</div>
<div class="parent">
     <div class="inlineTable">我是inline-table</div>
</div>
<div class="parent">
     <div class="inlineflex">我是inline-flex</div>
</div>

2.块级元素水平居中

块级元素水平居中的方法有很多，下面会一一列举：

a.将元素的左右外边距设置为auto。

cssy样式：

.child{
        margin: 0 auto;
  }

b.使用absolute+transdorm

 父元素相对定位，子元素绝对定位 left:50%，然后向左移动子元素一般的宽度达到水平居中。
 

css样式：

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

html结构：

<div class="parent">
  <div class="child">使用absolute+transdorm</div>
</div>

c.使用flex+justify-content
css3的flex布局具有兼容性问题，使用需谨慎。

css样式：

<style>
  .parent {
    display: flex;
    justify-content:center;
  }
</style>

html结构：

<div class="parent">
  <div class="child">flex+justify-content</div>
</div>

d.使用flex+margin
父元素设为flex布局，在设置子元素居中

css样式：

<style>
  .parent {
    display: flex;
  }
  .child {
    margin:0 auto;
  }
</style>

html结构

<div class="parent">
  <div class="child">flex+margin</div>
</div>

3.多个块级元素水平居中

html结构：

<div class="parent">
    <div class="chlid">多级块元素水平居中</div>
    <div class="chlid">多级块元素水平居中</div>
    <div class="chlid">多级块元素水平居中</div>
</div>

公用样式

.parent{
        border: 1px solid rosybrown;
    }
   .chlid{
       width: 50px;
       background: papayawhip;
       margin-right: 10px;
   }

css样式1——flex布局

<style>
    .parent{
        display: flex;
        justify-content: center;
    }
</style>

css样式2-inline-block + text-align: center

<style>
    .parent{
        text-align: center;
    }
   .chlid{
       display: inline-block;
   }
</style>

4.浮动元素水平居中

公用html结构：

<div class="parent">
   <span class="child">需要居中的子元素</span>    
</div>

• 1.定宽浮动元素，通过relative+margin

css样式：

 <style>
    .child {
        float: left;
        width: 500px;
        position: relative;
        left: 50%;
        margin-left: -250px;
        text-align: center;
    }
</style>

• 2.不定宽，父子元素设置相对定位

css样式：

<style>
    .parent {
        float: left;
        position: relative;
        left: 50%;
    }

    .child {
        float: left;
        position: relative;
        right: 50%;
    }
</style>

• 3.利用flex布局（通用不管定宽还是不定宽）

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

    .chlid {
        float: left;
    }
</style>

5.绝对定位元素水平居中

 <div class="parent">
    <div class="child">让绝对定位的元素水平居中对齐。</div>
  </div>
  .parent{
        position:relative;
    }
   .child{
         position: absolute; /*绝对定位*/
         width: 200px;
         height:100px;
         background: yellow;
         margin: 0 auto; /*水平居中*/
         left: 0; /*此处不能省略，且为0*/
         right: 0;/*此处不能省略，且为0*/
    }

二、垂直居中

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

<div class="parent">
     <span>单行内联元素垂直居中。</span>。
</div>
<style>
  .parent {
    height: 120px;
    line-height: 120px;
   }
</style>

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

a.利用flex布局（flex）

<div class="parent">
    <p>Dance like nobody is watching, code like everybody is.</p>
    <p>Dance like nobody is watching, code like everybody is.</p>
    <p>Dance like nobody is watching, code like everybody is.</p>
</div>
<style>
 .parent {
    height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }    
< /style>

b.利用表布局（table）

<style>
.parent {
    display: table;
    height: 140px;
    border: 2px dashed #f69c55;
}
.child {
    display: table-cell;
    vertical-align: middle;
}
</style>

3.块级元素垂直居中

公共html结构
<div class="parent">
    <div class="child">块级元素垂直居中。</div>
</div>

a.使用absolute+负margin(已知高度宽度)

 .parent {
   position: relative;
}
.child {
   position: absolute;  
   top: 50%;
   height: 100px;
   margin-top: -50px;
}

b.使用absolute+transform

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

c.使用flex+align-items

.parent {
    display:flex;
    align-items:center;
}

d.使用table-cell+vertical-align

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

三、水平垂直居中

公共html结构
<div class="parent">
    <div class="child"  style="width: 100px;height: 100px;background-color: #666">>块级元素垂直居中。</div>
</div>

方法一：绝对定位与负边距实现（已知高度宽度）

 .parent {
   position: relative;
 }
 .child {
   position: absolute;
   top: 50%;
   left: 50%;
   margin: -50px 0 0 -50px;
 }

方法二：绝对定位与margin:auto （已知高度宽度）

.parent {
   position: relative;
   height:200px;//必须有个高度
}
.child {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   margin: auto;//注意此处的写法
}

方法三：绝对定位+CSS3(未知元素的高宽)

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

方法四：flex布局

 .parent {
   height:200px;//必须有高度
   display: flex;
   justify-content: center;
   align-items: center;
 }

方法五：flex/grid与margin:auto

.parent {
  height:200px;//必须有高度
  display: grid;
}
.child {
  margin: auto;
}