块级/行内元素：水平/垂直居中

透晓西桥

于 2021-02-19 21:03:52 发布

阅读量258

点赞数

CC 4.0 BY-SA版权

分类专栏： # CSS

本文链接：https://blog.youkuaiyun.com/Yang_Cpp/article/details/113871812

2 篇文章

订阅专栏

本文详细介绍了网页设计中实现块级元素和行内元素水平及垂直居中的多种方法，包括margin、position、float、flex布局等。通过实例代码展示如何利用这些技术使元素在页面上精确居中，为前端开发者提供了实用的布局解决方案。

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

一、块级元素

定位position

position: absolute;
left:50%;
right: 50%;
transform: translate(-50%)

浮动

float: left;
margin-left: 50%;
margin-right: 50%;
transform: translate(-50%);

flex布局

html{
    display: flex;
    justify-content:center;
}
.div1{
    width: 200px;
    height: 200px;
    background-color: blanchedalmond;
}

定位position

div{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

flex

html{
    display: flex;
    align-items: center;
}

div{
    
}

在父级元素中使用：text-align: center

父级元素中设置行高：

div{
    height:30px; 
    line-height:30px
} /*DIV内的行内元素均会垂直居中*/