CSS行内元素和块级元素的水平居中，垂直居中，水平垂直居中实现

最新推荐文章于 2025-04-18 20:43:03 发布

原创最新推荐文章于 2025-04-18 20:43:03 发布

· 595 阅读

1 ·

版权

文章标签：

#css

CSS 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了CSS布局中实现元素水平居中、垂直居中以及水平垂直居中的多种方法，包括行内元素、块级元素、图片、弹性布局等。涵盖了text-align、margin、display属性的灵活运用，以及transform和flex布局的应用，帮助开发者更好地掌握页面元素的定位技巧。

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

常用内联元素：a,img,input,lable,select,span,textarea,font
常用的块级元素：div,p,table,form,h1,h2,h3,h4,h5,h6,dl,ol,ul,li

一、水平居中

行内元素居中：
text-align:center

图片，单个块级元素居中：margin-left和margin-right设成auto
margin: 0 auto
或者
display:block
margin：0 auto

多块级元素水平居中
父元素：text-align: center
子元素：display: inline-block;

块级元素中的行内元素居中：
块级：text-align:center
行内：display:inline-block

弹性布局(flex)，实现水平居中
父元素：
display: flex
justify-content: center
align-items:flex-end

块级元素水平居中：
父元素：
position: relative；
子元素：
position: absolute;
left: 50%;
margin-left: -333px;（元素的宽）
或者
transform来向左向上便宜半个内元素的宽
transform: translateX(-50%);

二，垂直居中

单行行内元素垂直居中：
height：40px
line-heigth:40px

多行元素垂直居中

1111111　

.center { 　　display: table; 　　width: 100%; } .center_text { 　　display: table-cell; 　　text-align: center; 　　vertical-align: middle; }

flex布局实现垂直居中
父元素：
display: flex;
flex-direction: column;
justify-content: center;

块级元素垂直居中：
父元素：
position: relative;
子元素：
position: absolute;
top: 50%;
transform: translateY(-50%);

三，水平垂直居中：

块级元素水平垂直居中：
父元素：
position: relative；
子元素：
position: absolute;
top: 50%;
left: 50%;
margin-left: -333px;（元素的宽）
margin-top: -200px;（元素的高）
或者
transform来向左向上便宜半个内元素的宽和高
transform: translate(-50%, -50%);

图片：
.img_wrap{
width:400px;
height:300px;
line-height:300px;
text-align: center;
}
.img_wrap img{
vertical-align:middle;
}

flex布局
父元素：
display: flex;
justify-content: center;
align-items: center;

在这里插入图片描述