html设置di纵向居中,垂直居中的五种方法.html

CSS 垂直居中的5种方法

* {

margin: 0;

padding: 0;

font-family: 楷体;

}

.outer {

width: 500px;

height: 400px;

border: 2px solid blue;

margin: 20px auto;

position: relative;

}

.outer div {

width: 200px;

height: 150px;

background-color: red;

}

/*demo1*/

.valign1 {

position: absolute;

top: 50%;

margin-top: -75px;

left: 50%;

margin-left: -100px;

}

/*domo2*/

.table {

display: table;

}

.valign2 {

display: table-cell;

vertical-align: middle;

}

.outer .inner {

width: 100px;

height: auto;

background-color: green;

}

/*demo3*/

.helper {

height: 50%;

margin-bottom: -75px;

float: left;

}

.valign3 {

clear: both;

position: relative;

}

/*demo4*/

.valign4 {

overflow: auto; /*防止内容溢出*/

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

margin: auto;

}

/*demo5*/

.valign5 {

line-height: 400px;

}

/*demo6*/

.parent{

display: flex;

align-items: center;

justify-content: center;

border: 1px solid #000;

}

.children{

border: 1px solid #000;

}

(1)绝对定位、有宽高

---

(2)display: table-cell(ie6、7不支持, 宽高可以不固定)

---

(3)元素外插入一个空元素，硬顶

helper高度为父元素一半，

margin-bottom为负的待居中元素高度的一半，

float是为了让辅助元素没有宽度,

因为有float，下面需要清楚浮动。

---

(4)绝对定位，top: 0, bottom: 0(ie6、7不支持)

---

(5)line-height = height(仅单行文本有效)

---

(6)css3

一键复制

编辑

Web IDE

原始数据

按行查看

历史