元素水平垂直居中

2021-09-27 12:34:35 字數 656 閱讀 8798

給子元素設定以下內容

給父元素新增屬性:

display:flex; 

align-items: center;

justify-content: center;

先給元素設定絕對定位,再依次新增以下屬性,具體**如下所示。

position:absolute; 

top:0;

left:0;

right:0;

bottom:0;

給父元素新增以下屬性:

display: table-cell;

vertical-align: middle;

text-align: center;

width: 200px;

height: 300px;

給子元素新增以下屬性:

position: absolute;

top:calc(50% - 100px); // calc(50% - 元素本身高度一半)

left: calc(50% - 150px); // 注意使用時減號間有空格

width: 200px;

height: 300px;

元素水平垂直居中

lang en charset utf 8 垂直居中示例title name viewport content width device width,initial scale 1 rel stylesheet href 可行,支援ie8 block1 block1 before center1 不...

元素水平垂直居中

只可用於定寬高元素 doctype html html lang en head meta charset utf 8 title 垂直居中 title style type text css body parent container style head body div id parent d...

元素水平垂直居中

只可用於定寬高元素 doctype html html lang en head meta charset utf 8 title 垂直居中 title style type text css body parent container style head body div id parent d...