html布局 垂直居中显示,前端经典案例：CSS水平、垂直居中布局

1、水平居中

1.1、行内元素水平居中这里行内元素是指文本text、图像img、按钮超链接等，只需给父元素设置text-align:center即可实现。.box {

text-align: center;

background-color: #f6e5dd;

}

水平居中

1.2、块级元素水平居中

1.2.1、固定宽度块级元素水平居中只需给需要居中的块级元素加margin:0 auto即可，但这里需要注意的是，这里块状元素的宽度width值一定要有.box {

width: 200px;

margin: 0 auto; /*左右margin值auto自动，不能为0*/

background-color: #f6e5dd;

}

水平居中

​

1.2.2、不固定宽度块级元素水平居中方法1：设置table布局通过给要居中显示的元素，设置display:table，然后设置margin:0 auto来实现.box {

display: table;

margin: 0 auto;

background-color: #f6e5dd;

}

水平居中

方法2：设置子元素inline-block(多个块状子元素均可居中)子元素设置inline-block，同时父元素设置text-align:center.box {

text-align: center;

background-color: #f6e5dd;

}

.inlineblock-div {

display: inline-block; /*不能设置为block或其他*/

text-align: center;

background-color: #d5eeeb;

}

子元素1

子元素2

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

display: flex;

justify-content: center;

background-color: #f6e5dd;

}

.flex-div {

background-color: #d5eeeb;

border: 2px solid red;

}

子元素1

子元素2

2、垂直居中

2.1、单行文本垂直居中设置line-height=height；.box {

height: 100px;

line-height: 100px;

background-color: #f6e5dd;

}

垂直居中的文本

2.2、 多行文本垂直居中通过设置父元素table，子元素table-cell和vertical-alignvertical-align:middle的意思是把元素放在父元素的中部.box {

display: table;

width: 300px;

height: 200px;

background-color: #f6e5dd;

}

.table-div {

display: table-cell;

vertical-align: middle;

border: 5px solid blue;

}

垂直居中的文本

另一行文本

2.3、块级元素垂直居中方法1：flex布局在需要垂直居中的父元素上，设置display:flex和align-items：center要求：父元素必须显示设置height值.box {

height: 100px;

width: 300px;

display: flex;

align-items: center;

background-color: #f6e5dd;

}

.item {

background-color: #d5eeeb;

}

垂直居中的块级元素

方法2：利用position和top和负margin(需知宽高).parent {

position: relative;

height: 200px;

width: 200px;

background-color: #f6e5dd;

}

.child {

position: absolute;

height: 100px;

width: 150px;

top: 50%;

margin-top: -50px; /*高度的一半*/

line-height: 100px;

background-color: #d5eeeb;

}

已知高度垂直居中

方法3：利用position和top和transformtransform中translate偏移的百分比就是相对于元素自身的尺寸而言的。.parent {

position: relative;

height: 200px;

width: 200px;

background-color: #f6e5dd;

}

.child {

position: absolute;

top: 50%;

transform: translate(0, -50%);

background-color: #d5eeeb;

}

已知高度垂直居中

3、水平垂直居中

3.1、绝对定位 + 负 Margin原理：首先利用 absolute 定位把容器块 左顶角 对准浏览器中心，然后再使用 负 margin 把容器块向左移动自身宽度的一半，向上移动自身高度的一半，即可以把容器块的中心移到浏览器中心。

优点：兼容性好

缺点：需要知道宽高，不够灵活.container {

/* ---容器盒子水平、垂直居中对齐--- */

width: 200px;

height: 100px;

position: absolute;

left: 50%;

top: 50%;

margin-left: -100px; /* 宽度的一半 */

margin-top: -50px; /* 高度的一半 */

/* ---内容居中对齐--- */

line-height:100px;/* 同容器盒子的高度一致 */

text-align: center;

background: #f6e5dd;

}

水平、垂直居中布局

3.2、绝对定位+Transform原理：首先利用 absolute 定位把容器块 左顶角 对准浏览器中心，然后再使用 CSS3 transform 的 translate(x,y) 把容器块向左(x)移动自身宽度的一半，向上(y)移动自身高度的一半，即可以把容器块的中心移到浏览器中心。

优点：不依赖盒子的宽高，比较灵活

缺点，兼容不好，在移动设备上建议使用.container {

/* ---容器盒子水平、垂直居中对齐--- */

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

width: 200px;

height: 100px;

/* ---内容居中对齐--- */

line-height: 100px;

/* 同容器盒子的高度一致 */

text-align: center;

background: #e6f4f5;

}

水平、垂直居中布局

3.3、绝对定位 + 自动 Margin原理：浏览器自动计算绝对定位的容器块上下左右外边距。

优点：灵活切兼容性好(IE8+)

缺点：适用于本身有尺寸的元素(比如图片)，对于段落等必须显式设置其宽高.container {

/* ---容器盒子水平、垂直居中对齐--- */

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

width: 200px;

height: 100px;

/* ---内容居中对齐--- */

line-height: 100px;

/* 同容器盒子的高度一致 */

text-align: center;

background: #d5eeeb;

}

水平、垂直居中布局

3.4、Flex布局优点：不需要知道宽高

缺点：相对于父容器定位，兼容性不好.container {

/* ---容器盒子水平、垂直居中对齐--- */

display: -webkit-flex;

display: -moz-flex;

display: -ms-flex;

display: -o-flex;

display: flex;

justify-content: center;

align-items: center;

width: 200px;

height: 100px;

background: #d5eeeb;

}

.child {

background: #f6e5dd;

height: 50px;

width: 100px;

}

水平、垂直居中布局