900字范文 > css设置子盒子水平垂直居中（四种方式）

css设置子盒子水平垂直居中（四种方式）

时间：2023-01-16 02:09:22

1. 使用绝对定位

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>* {margin: 0;padding: 0;}div {position: relative;width: 200px;height: 200px;border: 1px solid peru;}/* 1. 使用绝对定位 */p {position: absolute;top: 50%;left: 50%;width: 50px;height: 50px;margin: -25px 0 0 -25px;background-color: palegreen;}</style></head><body><div><p></p></div></body></html>

2. 使用margin

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>* {margin: 0;padding: 0;}div {position: relative;width: 200px;height: 200px;border: 1px solid peru;}/* 2. 使用margin */p {width: 50px;height: 50px;margin: 75px auto auto auto;background-color: palegreen;}</style></head><body><div><p></p></div></body></html>

3. 使用父标签 padding

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>* {margin: 0;padding: 0;}/* 3. 使用父标签 padding */div {position: relative;width: 50px;height: 50px;padding: 50px;border: 1px solid peru;}p {width: 50px;height: 50px;background-color: palegreen;}</style></head><body><div><p></p></div></body></html>

4. 父标签使用flex弹性盒子布局

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>* {margin: 0;padding: 0;}/* 4. 父标签使用flex弹性盒子布局 */div {display: flex;flex-flow: row nowrap;justify-content: center;align-items: center;width: 200px;height: 200px;border: 1px solid peru;}p {width: 50px;height: 50px;background-color: palegreen;}</style></head><body><div><p></p></div></body></html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。