总结几种居中布局及三列布局

最新推荐文章于 2024-03-27 16:54:49 发布

转载最新推荐文章于 2024-03-27 16:54:49 发布 · 217 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gr07/p/8006223.html

本文详细介绍多种网页布局技巧，包括水平及垂直居中的实现方法、两边固定中间自适应的三列布局解决方案，以及左右两栏布局的多种实现方式。每种方案都配有详细代码示例。

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

水平居中及垂直居中

// 方案一（宽度固定情况）

#parent{
    width: 100%;
    height:100%;
    position: relative;
}
#child{
    width: 400px;
    height: 200px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-color: #ccc;
}

// 方案二（宽度固定情况）

#parent{
    position: relative;
    width: 100%;
    height: 100%;
}
#child{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 400px;
    height: 200px;
    margin-top: -100px;
    margin-left: -200px;
    background-color: #ccc;
}

// 方案三（宽度不固定情况）

#parent{
    position: relative;
    width: 100%;
    height: 100%;
}
#child{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #ccc;
}

// 方案四（宽度不固定情况）

#parent{
    display: flex;
    justify-content:center;
    align-items:center;    
    width: 100%;
    height: 100%;
}
#child{
    background-color: #ccc;
}

两边固定中间自适应的三列布局

方案一 浮动
注意：中间的center结构要放到最后面 以及父元素伪类清除浮动，

.left{
    float: left;
    width: 200px;
    height: 200px;
}
.right{
    float: right;
    width: 100px;
    height: 100px;
}
.center{
    margin:0 120px 0 220px;
}

方案二 定位
注意：这种方案高度不能自适应会塌陷

.parent{
    position: relative;
}
.left{
    position: absolute;
    width: 200px;
    height: 200px;
    top: 0;
    left: 0;
}
.right{
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
}
.center{
    margin:0 120px 0 220px;
}

方案三 双飞
注意：这种布局的结构要将中间center结构放置到最前面并套上一个容器，结构样式如下

<div>
  <center></center>
</div>
<left></left>
<right></right>

div {
  float: left;
  width: 100%;
}
center {
  margin: 0px 140px 0px 220px;
}
left {
  float: left;
  margin-left: -100%;
  width: 200px;
}
right {
  float: left;
  margin-left: -120px;
  width: 120px;
}