給子元素設定以下內容
給父元素新增屬性:
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...