首页 > 代码库 > CSS实现垂直居中水平居中

CSS实现垂直居中水平居中

1、绝对定位居中(子元素需设置宽高)

  • > 原理:元素在过度受限情况下,将margin设置为auto,浏览器会重算margin的值,过度受限指的是同时设置top/bottom与height或者left/right与width。

内容块的父容器:

position:relative;


子元素: (必须设置高度)

position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin:auto;

2、绝对定位配合margin(子元素需设置宽高)

  • > 原理:top:50%元素上边界位于包含框中点,设置负外边界使得元素垂直中心与包含框中心重合;

第一种

<style>
  .one{
    border: 1px solid red;
    width: 200px;height: 200px;
    position: relative;
  }
  .two{
    background: red;
    width: 100px;height: 100px
    position: absolute;left: 50%;top:50%;
    margin: -50px 0 0 -50px;   //(margin设置百分比是相当于自身的高度与宽度)
  }
</style>
<div class="one">
  <div class="two"></div>
</div>

第二种

<style>
    .one{
      border: 1px solid red;
      width: 300px;height: 300px;
      position: relative;
    }
    .two{
        position:absolute;
        top:50%;
        left:0;
        right:0;
        margin:auto;
        margin-top:-100px; //(margin设置百分比是相当于自身的高度与宽度)
        width:200px;
        height:200px;
        background: red;
    }
</style>
<div class="one">
    <div class="two"></div>
</div>                    

3、table-cell方式(子元素不需设置宽高)

  • > 原理:利用表格布局的特点,vertical-align设置为middle;单元格中的内容与所在行中间对齐

父容器:(设置宽高)

display:table-cell;text-align:center;vertical-align:middle;

子元素:

display:inline-block;vertical-align:middle;

 

<style>
    .one{
        border: 1px solid red;
        width: 200px;height: 200px;
        display:table-cell;vertical-align:middle;text-align: center;
    }
    .two{
        background: red;
        (1)display:inline-block;(用此方法向上偏差2px)
        (2)margin:auto(垂直水平居中)
    }
</style>
<div class="one">
    <div class="two">11111111111</div>
</div>

 

 

4、通过添加空span标签使图片居中(子元素需设置宽高)
父容器:

text-align: center;

<span>:

display: inline-block;  //将行内元素改变为行内块元素显示
width: //1px; 实现IE下可读效果
height: 100%; //使用元素高度和图片容器高度一样
vertical-align: middle; //垂直对齐

图片:

vertical-align: middle;

 

<style>
    .one{
        border: 1px solid red;
        width: 200px;height: 200px;
        text-align: center;
    }
    span{
        display: inline-block;
        width: 1px;
        height: 100%;
    vertical-align: middle;
    }
</style>
<div class="one">
    <span></span>
    <img src="http://www.mamicode.com/img/jian.png" >
</div>

 

 

5、外边距margin取负数,大小为width/height(不使用box-sizing: border-box时包括padding,)的一半,再加上top: 50%; left: 50%;。
(子元素需设置宽高)

<style>
    .one{
        border: 1px solid red;
        width: 200px;height: 200px;
        position: relative;
    }
    .two{
        background: red;
        width: 30px;
        height: 20px;
        padding: 20px;
        position: absolute;
        top: 50%; left: 50%;
        margin-left: -35px; /* (width + padding)/2 */
        margin-top: -30px; /* (height + padding)/2 */
    }
</style>
<div class="one">
    <div class="two"></div>
</div>    

 

 

6、内容定义transform:translate(-50%,-50%),并且加上top:50%;left:50%。(子元素需设置宽高)

<style>
    .one{
        border: 1px solid red;
        width: 200px;height: 200px;
        position: relative;
    }
    .two{
        background: red;
        width: 50%;
        height: 30%;
        margin: auto;
        position: absolute;
        top: 50%; left: 50%;
        -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }
</style>
<div class="one">
    <div class="two"></div>
</div>

 

 

7、增加额外子元素设置margin-bottom为内容元素的高度+padding的一半。(不能实现水平垂直居中,仅垂直居中)

  • > 原理与2方法类似,floater的下边界是包含框的中心线,负下外边界保证center的中心线与包含框中心线重合
<style>
    .one{
        border: 1px solid red;
        width: 200px;height: 200px;
    }
    .floater{
        float: left;
        height: 50%;
        width: 100%;
        margin-bottom: -10%;
    }
    .two{
        clear: both;
        height: 20%;
        background: red;
    }
</style>
<div class="one">
    <div class="floater"></div>
    <div class="two"></div>
</div>

 

 

8、inline-block方式(子元素不需设置宽高)

  • > 原理:为同一行的inline-block元素设置vertical-align:middle,该行内的inline-block元素会按照元素的垂直中心线对齐。
<style>
    .one{
        border: 1px solid red;
        width: 300px;height: 300px;
        text-align: center;
    }
    .one:after{
        content: ‘‘;
        display: inline-block;
        vertical-align: middle;
        height: 100%;
    }
    .two{
        background: red;
        display:inline-block;
        vertical-align:middle;
    }
</style>
<div class="one">
    <div class="two">11111111111111111111</div>
</div>

 

 

9、弹性盒式布局(子元素不需设置宽高)
[CSS弹性盒][1]
第一种

<style>
    .one{
        border: 1px solid red;
        width: 300px;height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .two{
        background: red;
    }
</style>
<div class="one">
    <div class="two">111111111111</div>
</div>    

第二种

<style>
    .one{
        border: 1px solid red;
        width: 300px;height: 300px;
        display: flex;
    }
    .two{
        background: red;
        margin:auto;
    }
</style>
<div class="one">
    <div class="two">111111111111</div>
</div>

 

CSS实现垂直居中水平居中