使用CSS實作div水平垂直居中的方法介紹

實作居中的方案很多，這裡介紹下純CSS使用absolute來配合margin的方案。

1. p寬高固定

width: 400px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -200px;

 margin-top為-(height / 2)，margin-left為-(width / 2)。當然也可以不用margin，也就是top為calc(100% - height) / 2，left為calc(100% - width) / 2，但建議可以不用calc()就不要用。

2. p寬高不固定

width: 50%;
height: 50%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;

 注意，這適用於寬高需指定的情況，例如使用百分比或用js動態修改，不然可能被當成100%處理。

 也可以不用margin用translate()，如下：

width: 50%;
height: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);

 3. CSS3不定寬高水平垂直居中

justify-content: center; /* 子元素水平居中 */
align-items: center;     /* 子元素垂直居中 */
display: -webkit-flex;

# 在父級元素上方添加，即可實現子元素水平垂直居中。

以上是使用CSS實作div水平垂直居中的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！