css怎样设置让盒子水平垂直居中的方法_盒子水平垂直居中怎么设置 css-优快云博客

本文链接：https://blog.youkuaiyun.com/LJDbk/article/details/123188527

本文介绍了五种不同的技术来实现网页元素的水平和垂直居中对齐：1) 使用Flexbox；2) 通过position相对和绝对定位；3) 利用position的auto margins；4) 利用文本居中和行内元素的垂直对齐；5) 应用CSS Grid布局。这些方法覆盖了不同场景下的居中需求，适用于各种现代浏览器。

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

第一种方法：弹性盒flexbox

<style>

div {

display: flex;

主轴水平居中

justify-content: center;

交叉轴水平居中

align-items: center;

width: 300px;

height: 300px;

border: 1px solid red;

}

p {

width: 100px;

height: 100px;

background-color: green;

}

</style>

<body>

<div>

<p></p>

</div>

</body>

第二种方法：position定位

<style>

div {

相对定位

position: relative;

width: 300px;

height: 300px;

border: 1px solid red;

}

p {

绝对定位

position: absolute;

走父元素上面的一半

top: 50%;

走父元素左边的一半

left: 50%;

走自身高度的一半像素

margin-top: -50px;

走自身宽度的一半像素

margin-left: -50px;

width: 100px;

height: 100px;

background-color: green;

}

</style>

<body>

<div>

<p></p>

</div>

</body>

第三种方法：定位position

<style>

div {

position: relative;

width: 300px;

height: 300px;

border: 1px solid red;

}

p {

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

width: 100px;

height: 100px;

background-color: green;

}

</style>

<body>

<div>

<p></p>

</div>

</body>

第四种方法：

div {

width: 300px;

height: 300px;

border: 1px solid red;

text-align: center;

line-height: 300px;

}

p {

转为行内快元素

display: inline-block;

width: 100px;

height: 100px;

background-color: green;

文本垂直居中

vertical-align: middle;

}

<body>

<div>

<p></p>

</div>

</body>

第五种方法：

.box {

width: 300px;

height: 300px;

border: 1px solid #000;

/* 网格布局 */

display: grid;

/* 设置3行高度均为100px */

grid-template-rows: repeat(3,100px);

/* 设置3列高度均为100px */

grid-template-columns: repeat(3,100px);

grid-template-areas: ". . ." ". a ." ". . .";

}

.small {

width: 100px;

height: 100px;

background-color: red;

grid-area: a;

}

</div>