溫馨提示×

div水平垂直居中的四種方式

div
小云
101
2023-08-05 16:46:23
欄目: 編程語言

有四種常見的方式可以實現(xiàn)div水平垂直居中：

  1. 使用Flexbox布局：將父元素的display屬性設(shè)置為flex，然后使用justify-content和align-items屬性將子元素水平和垂直居中。
.parent {
display: flex;
justify-content: center;
align-items: center;
}
  1. 使用絕對定位和transform屬性：將父元素相對定位（position: relative），然后將子元素絕對定位（position: absolute），并使用top、bottom、left和right屬性將子元素居中。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
  1. 使用表格布局：將父元素的display屬性設(shè)置為table，然后將子元素的display屬性設(shè)置為table-cell，并使用vertical-align屬性將子元素垂直居中。
.parent {
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}
  1. 使用Grid布局：將父元素的display屬性設(shè)置為grid，然后使用justify-items和align-items屬性將子元素水平和垂直居中。
.parent {
display: grid;
justify-items: center;
align-items: center;
}

以上四種方式都可以實現(xiàn)div水平垂直居中，選擇哪種方式取決于具體的布局需求和瀏覽器兼容性要求。

0 踩