如何使一个盒子水平垂直居中？

彪哥带你学前端

已于 2022-08-17 22:27:30 修改

阅读量168

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css h5 文章标签： html css 前端

于 2022-08-17 22:18:30 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_59959632/article/details/126395323

css 同时被 2 个专栏收录

6 篇文章

订阅专栏

2 篇文章

订阅专栏

本文介绍了六种使用CSS使盒子在页面中水平垂直居中的方法：1) 利用绝对定位和负边距；2) 利用margin自动填充；3) 利用display: table-cell; 4) 使用flex布局；5) 计算父盒子与子盒子的距离；6) 利用transform属性进行偏移。每种方法都提供了相应的HTML和CSS代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一：利用定位（常用方法,推荐）

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.parent {

width: 500px;

height: 500px;

border: 1px solid #000;

position: relative;

}

.child {

-------------

position: absolute;

top: 50%;

left: 50%;

margin-top: -50px;

margin-left: -50px;

------------------------

width: 100px;

height: 100px;

border: 1px solid #999;

}

</style>

</head>

<body>

<div class="child">我是子元素</div>

</div>

</body>

</html>

方法二：利用 margin:auto;

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.parent {

position: relative;

width: 500px;

height: 500px;

border: 1px solid #000;

}

.child {

position: absolute;

margin: auto;

top: 0;

left: 0;

right: 0;

bottom: 0;

width: 100px;

height: 100px;

border: 1px solid #999;

}

</style>

</head>

<body>

<div class="child">我是子元素</div>

</div>

</body>

</html>

方法三：利用 display:table-cell

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.parent {

width: 500px;

height: 500px;

border: 1px solid #000;

display: table-cell;

vertical-align: middle;

text-align: center;

}

.child {

width: 100px;

height: 100px;

border: 1px solid #999;

display: inline-block;

}

</style>

</head>

<body>

<div class="child">我是子元素</div>

</div>

</body>

</html>

方法四：利用 display：flex;设置垂直水平都居中

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.parent {

display: flex;

justify-content: center;

align-items: center;

width: 500px;

height: 500px;

border: 1px solid #000;

}

.child {

width: 100px;

height: 100px;

border: 1px solid #999;

}

</style>

</head>

<body>

<div class="child">我是子元素</div>

</div>

</body>

</html>

方法五：计算父盒子与子盒子的空间距离(这跟方法一是一个道理)

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.parent {

width: 500px;

height: 500px;

border: 1px solid #000;

}

.child {

width: 100px;

height: 100px;

border: 1px solid #999;

margin-top: 200px;

margin-left: 200px;

}

</style>

</head>

方法六：利用 transform

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.parent {

width: 500px;

height: 500px;

border: 1px solid #000;

position: relative;

}

.child {

width: 100px;

height: 100px;

border: 1px solid #999;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

</style>

</head>

<body>

<div class="child">我是子元素</div>

</div>

</body>

</html>