怎么让一个子级div水平垂直居中

您所在的位置：网站首页 › css设置div左右居中 › 怎么让一个子级div水平垂直居中

怎么让一个子级div水平垂直居中

2023-11-27 01:57| 来源: 网络整理| 查看: 265

1、固定宽高，使用定位

.child { position: absolute; left: 50%; top: 50%; margin-left: -250px; margin-top: -250px; width: 500px; height: 500px; background: yellow; z-index: 1; }

2、非固定宽高（也适用于固定宽高），使用定位+transfrom

.child { position: absolute; left: 50%; top: 50%; background: yellow; z-index: 1; transform: translate3d(-50%,-50%,0); }

3、flex布局

.parent { display: flex; width: 400px; height: 400px; background: red; justify-content: center; //水平居中 align-items: center; //垂直居中 } .child { width: 200px; height: 200px; background: #000; }

或者

.parent { display: flex; width: 400px; height: 400px; background: red; } .child { width: 200px; height: 200px; background: #000; margin: auto; }

4、table-cell布局

因为table-cell相当于表格的td，td为行内元素，无法设置宽和高，所以嵌套一层，嵌套一层必须设置display: inline-block

.parent { width: 400px; height: 400px; display: table; } .content { background: red; display: table-cell; vertical-align: middle; text-align: center; } .child { background: #000; display: inline-block; width: 200px; height: 200px; }

flex、table-cell布局因为改变了父级div的display属性，在实际应用当中，多个子节点的情况下，反而不太好用，酌情选择方法

【本文地址】

怎么让一个子级div水平垂直居中

怎么让一个子级div水平垂直居中

今日新闻

推荐新闻