CSS实现垂直居中和水平居中

水平居中

• 1、子元素是行内元素
  设置 text-align:center
  css:

.container{
    width: 300px;
    height: 300px;
    border: 1px solid black;
    text-align: center;
}
.inner{
    background-color: red;
    font-size: 25px;
    font-weight: bold;
    color: white;
}

html:

<div class="container">
    <span class="inner">middle</span>
</div>

效果：

• 2、子元素为定宽块级元素
  解法1：设置 左右 margin 值为 auto
  css:

.container{
    width: 300px;
    height: 300px;
    border: 1px solid black;
}
.inner{
    width: 150px;
    height: 100px;
    margin: 0 auto;
}   

html:

<div class="container">
    <div class="inner"></div>
</div>

效果：

解法2：弹性布局
父元素设置display: flex; justify-content: center;
css:

.container{
    width: 300px;
    height: 300px;
    border: 1px solid black;
    display: flex;
    justify-content: center;
}
.inner{
    width: 150px;
    height: 100px;
    background-color: green;
}       

html:

<div class="container">
    <div class="inner"></div>
</div>

• 3、不定宽块级元素
  在这种情况下，实际上也不存在水平居中一说，因为子元素是块级元素没有设定宽度，那么它会充满整个父级元素的宽度，即在水平位置上宽度和父元素一致
  css:

.container{
    width: 300px;
    height: 300px;
    border: 1px solid black;
}
.inner{
    border: 1px solid gray;
    background-color: green;
}   

html:

<div class="container">
    <div class="inner">middle</div>
</div>

效果：

垂直居中

• 1、子元素为行内元素
  设定父元素的line-height为其高度来使得子元素垂直居中
  css:

.container{
    width: 300px;
    height: 300px;
    border: 1px solid black;
    line-height: 300px;
}
.inner{
    background-color: red;
    font-size: 25px;
    font-weight: bold;
    color: white;
}   

html:

<div class="container">
    <span class="inner">middle</span>
</div>

效果：

• 子元素是块级元素但是子元素高度没有设定
  解法1：父元素设置display: table-cell;vertical-align: middle;
  css:

.container{
    width: 300px;
    height: 300px;
    border: 1px solid black;
    display: table-cell;
    vertical-align: middle;
}
.inner{
    background-color: red;
    font-size: 25px;
    font-weight: bold;
}       

html:

<div class="container">
    <span class="inner">middle</span>
</div>

效果：

解法2：弹性盒子
css:

.container{
    width: 300px;
    height: 300px;
    border: 1px solid black;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.inner{
    background-color: red;
    font-size: 25px;
    font-weight: bold;
    color: white;
}       

html:

<div class="container">
    <span class="inner">middle</span>
</div>

效果同上。

解法3：子元素设置相对定位并设置translateY(-50%)
css:

.container{
    width: 300px;
    height: 300px;
    border: 1px solid black;
}
.inner{
    position:relative;                         
    top:50%;                         
    transform:translateY(-50%);             
    -webkit-transform:translateY(-50%);             
    -moz-transform:translateY(-50%);            
     -ms-transform:translateY(-50%);             
     background:red;
     font-size: 25px;
     font-weight: bold; 
     color: white;
}       

html:

<div class="container">
    <span class="inner">middle</span>
</div>

效果同上。

• 子元素为块级元素并且高度已设定
  解法1：子元素使用绝对定位和负margin
  css：

.container{
    width: 300px;
    height: 300px;
    border: 1px solid black;
    position: relative;
}
.inner{
    width: 150px;
    height: 100px;
    background-color: green;
    position: absolute;
    top: 50%;
    margin-top: -50px; 
}           

html:

<div class="container">
    <div class="inner"></div>
</div>

效果：

解法2：子元素使用相对定位并设置translateY(-50%)
css：

.container{
    width: 300px;
    height: 300px;
    border: 1px solid black;
}
.inner{
    position:relative;             
    width:150px;             
    height:100px;             
    top:50%;                         
    transform:translateY(-50%);             
    -webkit-transform:translateY(-50%);             
    -moz-transform:translateY(-50%);            
     -ms-transform:translateY(-50%);             
     background:green; 
}           

html:

<div class="container">
    <div class="inner"></div>
</div>

效果同上。

解法3：弹性盒子
css：

.container{
    width: 300px;
    height: 300px;
    border: 1px solid black;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.inner{
    width: 150px;
    height: 100px;
    background-color: green;
}       

html:

<div class="container">
    <div class="inner"></div>
</div>

效果同上。