CSS 如何布局与居中

最新推荐文章于 2025-04-24 07:00:00 发布

weixin_34233618

最新推荐文章于 2025-04-24 07:00:00 发布

阅读量52

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c8de34e6fb9a070fe0dcb39

博客介绍了HTML元素的布局与居中技巧。包括使用双浮动和绝对定位实现左右、左中右布局，以及块级和内联元素的水平、垂直居中和元素内容的居中方法。还提及块级元素添加特定属性后的变化及解决空隙问题的方法。

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

左右布局

可以使用双浮动完成左右布局效果：

子元素添加 float
父元素添加上 clearfix 类，清除浮动效果后父元素的塌陷

html 代码如下：

  <div class="parent clearfix">
    <div class="leftChild"></div>
    <div class="rightChild"></div>
  </div>
复制代码

css 代码如下：

clearfix::after{
  content: '';
  display: block;
  clear: both;
}
.parent{
  padding: 30px;
  background: black;
  height: 100px;
}
.leftChild{
  float: left;
  width: 50%;
  height: 100px;
  background: red;
}
.rightChild{
  float: right;
  width: 50%;
  height: 100px;
  background: green;
}
复制代码

效果如下：

左中右布局

--- 使用双浮动完成左中右布局效果与之前用法相同，只是多一条<div>，不再演示 ---

同时也可使用绝对定位完成左中右布局：

父元素添加position: relative;
子元素添加position: absolute;
子元素使用top: $px; botton: $px; left: $px; right: $px;进行定位

html 代码如下：

<div class="parent">
    <div class="leftChild"></div>
    <div class="middleChild"></div>
    <div class="rightChild"></div>
  </div>
复制代码

css 代码如下：

.parent{
  padding: 30px;
  background: black;
  height: 100px;
  position: relative;
}
.leftChild{
  width: 30%;
  height: 100px;
  background: red;
  position: absolute;
  left: 0;
}
.rightChild{
  width: 30%;
  height: 100px;
  background: green;
  position: absolute;
  right: 0;
}
.middleChild{
  width: 30%;
  height: 100px;
  background: yellow;
  position: absolute;
  left: 35%;
}
复制代码

效果如下：

水平居中

html 元素

块级元素

添加 margin: 0 auto; 使其元素水平居中

html 代码如下：

  <div class="parent">
    <div class="child"></div>
  </div>
复制代码

css 代码如下：

.parent{
  padding: 30px;
  background: black;
  height: 100px;
}
.child{
  height: 100%;
  background: red;
  width: 20%;
  margin: 0 auto;
}
复制代码

效果如下：

内联元素

添加 display: block; 转化成块级元素，然后按照块级元素水平居中。

元素内容

块级元素内容

添加 text-align: center; 使其内容水平居中

html 代码如下：

  <div class="parent">
    <div class="child">I'm child~</div>
  </div>
复制代码

css 代码如下：

.parent{
  padding: 30px;
  background: black;
  height: 100px;
}
.child{
  height: 100%;
  background: red;
  width: 60%;
  margin: 0 auto;
  text-align: center;
}
复制代码

效果如下：

内联元素内容

添加 display: block; 转化成块级元素，然后按照块级元素内容水平居中。

垂直居中

html 元素

块级元素

添加 position: absolute; 使其元素绝对定位，再利用 top: $px; 定位

html 代码如下：

  <div class="parent">
    <div class="child">I'm child~</div>
  </div>
复制代码

css 代码如下：

.parent{
  padding: 30px;
  background: black;
  height: 300px;
}
.child{
  height: 50px;
  background: red;
  width: 60%;
  position: absolute;
  top: 155px;
}
复制代码

效果如下：

内联元素

添加 display: block; 转化成块级元素，然后按照块级元素垂直居中。

元素内容

块级元素内容

添加 line-height: height($)px; 使其 元素内容行高 = 块级元素高度。
html 代码如下：

  <div class="parent">
    <div class="child">I'm child~</div>
  </div>
复制代码

css 代码如下：

.parent{
  padding: 30px;
  background: black;
  height: 300px;
}
.child{
  height: 50px;
  background: red;
  width: 60%;
  position: absolute;
  top: 155px;
  line-height: 50px;
}
复制代码

效果如下：