使用CSS实现盒子水平垂直居中的方法(8种)

时间：2021-05-08

原始代码：

center.html：

<!DOCTYPE html><html lang="Zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Center</title> <link rel="stylesheet" href="center.css"></head><body> <div class="father"> <div class="son"></div> </div></body></html>

center.css：

body { background-color: #6ed0ff;}.father { background-color: #be33ec; border-radius: 20px; box-shadow: 0 0 15px rgb(0, 0, 0); margin: 100px auto; width: 300px; height: 300px;}.son { background-color: #fcff00; border-radius: 20px; box-shadow: 0 0 10px rgb(0, 0, 0); width: 100px; height: 100px;}

原始效果：

实现子盒子相对于父盒子垂直居中效果：

1. grid

.father { display: grid;}.son { align-self: center; justify-self: center;}

2. absolute + 负margin

.father { position: relative;}.son { position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px;}

3. absolute + transform

.father { position: relative;}.son { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}

4. absolute + margin: auto

.father { position: relative;}.son { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto;}

5. flex

.father { display: flex; justify-content: center; align-items: center;}

6. margin+transfrom

.father { overflow: hidden;}.son { margin: 50% auto; transform: translateY(-50%);}

7. table-cell

.father { display: table-cell; text-align: center; vertical-align: middle;}.son { display: inline-block;}

8. inline-block + vertical-align

.father { text-align: center; line-height: 300px;}.son { display: inline-block; vertical-align: middle;}

到此这篇关于使用CSS实现盒子水平垂直居中的方法(8种)的文章就介绍到这了,更多相关CSS 盒子水平垂直居中内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章