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

CSS实现垂直居中水平居中

2024-10-24 13:20:40   212人阅读

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; 实现ＩＥ下可读效果
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实现垂直居中水平居中


联系
我们