水平居中

水平居中可分为行内元素水平居中和块级元素水平居中

行内元素水平居中

这里行内元素是指文本text、图像img、按钮超链接等,只需给父元素设置text-align:center即可实现。

.center{
    text-align:center;
}

块级元素水平居中

定宽块级元素水平居中

只需给需要居中的块级元素加margin:0 auto即可,但这里需要注意的是,这里块状元素的宽度width值一定要有。

.center{
    width:200px;
    margin:0 auto;
    border:1px solid red;
}

不定宽块级元素水平居中

不定宽,即块级元素宽度不固定

方法1:设置table
通过给要居中显示的元素,设置display:table,然后设置margin:0 auto来实现

.center{
    display:table;
    margin:0 auto;
    border:1px solid red;
}

方法2:设置inline-block
子元素设置inline-block,同时父元素设置text-align:center

<style>
.center{
    text-align:center;
}
.inlineblock-div{
    display:inline-block;
}
</style>
<div class="center">
    <div class="inlineblock-div">1</div>
    <div class="inlineblock-div">2</div>
</div>

方法3:设置flex布局
只需把要处理的块状元素的父元素设置display:flex,justify-content:center;

<style>
.center{
    display:flex;
    justify-content:center;
}
</style>
<div class="center">
    <div class="flex-div">1</div>
    <div class="flex-div">2</div>
</div>

方法4:position + 负margin;
方法5:position + margin:auto;
方法6:position + transform;
:这里方法4、5、6同下面垂直居中一样的道理,只不过需要把top/bottom改为left/right,在垂直居中部分会详细讲述。

垂直居中

单行文本垂直居中

对于单行文本,我们只需要将文本行高(line-height)和所在区域高度(height)设为一致即可:

<style>
#div1{
    width: 300px;
    height: 100px;
    margin: 50px auto;
    border: 1px solid red;
    line-height: 100px; /*设置line-height与父级元素的height相等*/
    text-align: center; /*设置文本水平居中*/
    overflow: hidden; /*防止内容超出容器或者产生自动换行*/
}
</style>
<div id="div1">
    这是单行文本垂直居中
</div>

多行文本垂直居中

多行文本垂直居中分为两种情况,一个是父级元素高度不固定,随着内容变化;另一个是父级元素高度固定。

父级元素高度不固定

父级高度不固定的时,高度只能通过内部文本来撑开。这样,我们可以通过设置内填充(padding)的值来使文本看起来垂直居中,只需设置padding-top和padding-bottom的值相等:

<style>
#div1{
    width: 300px;
    margin: 50px auto;
    border: 1px solid red;
    text-align: center; /*设置文本水平居中*/
    /*       上下  左右   */
    padding: 50px 20px;
}
</style>
<div id="div1">
        这是多行文本垂直居中,
        这是多行文本垂直居中,
        这是多行文本垂直居中,
        这是多行文本垂直居中。
</div>

父级元素高度固定

本文一开始就提到css中的vertical-align属性,但是它只对拥有valign特性的元素才生效,结合display: table;,可以使得div模拟table属性。因此我们可以设置父级div的display属性:display: table;;然后再添加一个div包含文本内容,设置其display:table-cell;和vertical-align:middle;。具体代码如下:

<style>
#outer{
    width: 400px;
    height: 200px;
    margin: 50px auto;
    border: 1px solid red;
    display: table;
}
#middle{ 
    display:table-cell; 
    vertical-align:middle;  
    text-align: center; /*设置文本水平居中*/  
    width:100%;   
}
</style>
<div id="outer">
    <div id="middle">
        这是固定高度多行文本垂直居中,
        这是固定高度多行文本垂直居中,
        这是固定高度多行文本垂直居中,
        这是固定高度多行文本垂直居中。
    </div>
</div>

注:IE7及以下会效果失效。

块级元素垂直居中

方法1:flex布局

在需要垂直居中的父元素上,设置display:flex和align-items:center
要求:父元素必须显示设置height值

<style>
.center{
    width:200px;
    height:300px;
    display:flex;
    align-items:center;
    border:2px solid blue;
}
</style>
<div class="center">
    <div>垂直居中</div>
</div>

利用position和top和负margin(需知宽高)

设置元素为absolute/relative/fixed
margin=负一半

<style>
.parent{
    position:relative;
    height:200px;
    width:200px;
    border:1px solid blue;
}
.child{
    position:absolute;
    height:100px;
    width:150px;
    top:50px;
    margin-top:-50px;
    line-height:100px;
    background-color:red;
}
</style>
<div class="parent">
    <div class="child">已知高度垂直居中</div>
</div>

利用position和top/bottom和margin:auto

<style>
.parent{
    position:relative;
    height:200px;
    width:200px;
    border:1px solid blue;
}
.child{
    position:absolute;
    height:10px;
    width:150px;
    top:0;
    bottom:0;
    margin:auto;
    line-height:100px;
    background-color:red;
}
</style>
<div class="parent">
    <div class="child">已知高度垂直居中</div>
</div>

利用position和top和transform

transform中translate偏移的百分比就是相对于元素自身的尺寸而言的。

<style>
.parent{
    position:relative;
    height:200px;
    width:200px;
    border:1px solid blue;
}
.child{
    position:absolute;
    top:50%;
    transform:translate(0,-50%);
    line-height:100px;
    background-color:red;
}
</style>
<div class="parent">
    <div class="child">已知高度垂直居中</div>
</div>

注:

  • 上述的块级垂直居中方法,稍加改动,即可成为块级水平居中方法,如top/bottom换成left/right
  • transform方法,可用于未知元素大小的居中

水平垂直居中

方法1:绝对定位+margin:auto

<style>
div{
    width: 200px;
    height: 200px;
    background: green;
    
    position:absolute;
    left:0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
</style>

绝对定位+负margin

<style>
    div{
        width:200px;
        height: 200px;
        background:green;
        
        position: absolute;
        left:50%;
        top:50%;
        margin-left:-100px;
        margin-top:-100px;
    }
</style>

绝对定位+transform

<style>
    div{
        width: 200px;
        height: 200px;
        background: green;
        
        position:absolute;
        left:50%;    /* 定位父级的50% */
        top:50%;
        transform: translate(-50%,-50%); /*自己的50% */
    }
</style>

flex布局

<style>
   .box{
         height:600px;  
         
         display:flex;
         justify-content:center;  //子元素水平居中
         align-items:center;      //子元素垂直居中
           /* aa只要三句话就可以实现不定宽高水平垂直居中。 */
    }
    .box>div{
        background: green;
        width: 200px;
        height: 200px;
    }
</style>

table-cell实现居中

<style>
    div{
        display:table-cell;
        text-align:center;
        vertical-align: middle;
    }
</style>

参考链接

CSS-水平居中、垂直居中、水平垂直居中
css 文本和div垂直居中方法汇总