CSS的水平居中与垂直居中

一、水平居中

二、垂直居中

三、水平垂直居中

---

一、水平居中

行内元素水平居中：指文本text、图像img、按钮超链接等

只需给父元素设置text-align:center即可实现

.center{
    text-align:center;
}

水平居中

块级元素水平居中：指div标签等

只需给需要居中的块级元素设置margin:0 auto即可，但宽度width值一定要有

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

水平居中

不定宽块级元素水平居中：指块级元素宽度不固定

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

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

水平居中

方法2：设置inline-block（多个块状元素）即子元素设置inline-block，同时父元素设置text-align:center来实现

.center{
    text-align:center;
}
.inlineblock-div{
    display:inline-block;
}


    
水平居中

二、垂直居中

基于设置div的top值为50%后，再调整垂偏移量来实现居中

.content {
    width: 400px;
    height: 400px;
    background: red;
    position: relative; /* 垂直居中 */
    top: 50%; /* 偏移 */
    // margin-top: -200px; /* 方法1：因为div的自身高度是400，所以需要设置margin-top值为-200 */
    transform: translateY(-50%); /* 方法2：使得div向上平移（translate）自身高度的一半(50%) */
}

弹性布局（flex）来实现居中

.body {
    display: flex;
    align-items: center; /*定义body的元素垂直居中*/
    justify-content: center; /*定义body的里的元素水平居中*/
}
.content {
    width: 400px;
    height: 400px;
    background: red;        
}


    

通过verticle-align:middle实现CSS垂直居中，需要注意，vertical生效的前提是元素的display：inline-block

.content {
    width: 400px;
    height: 400px;
    background: red;
    display: inline-block;
    vertical-align: middle;
}

三、水平垂直居中

.center{
    width:400px;
    margin:0 auto; /* 水平居中 */
    border:1px solid red;
    position: relative; /* 垂直居中 */
    top: 50%;
    transform: translateY(-50%);
}

水平垂直居中