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>

效果同上。