美文网首页
CSS布局与水平垂直居中

CSS布局与水平垂直居中

作者: 砂糖橘最甜 | 来源:发表于2019-02-22 12:32 被阅读0次
    • 左右布局
    • 左中右布局
    • 水平居中
    • 垂直居中
    • 水平垂直居中

    左右布局

    float实现左右布局

    子元素设置float: left父元素设置clearfix类，清除浮动

    <div class="wrap clearfix">
        <div class="left-box">
            左边
        </div>
        <div class="right-box">
            右边
        </div>
</div>


body{
    margin: 0;
}
.clearfix::after{
    content: "";
    display: block;
    clear: both;
}
.wrap{
    width: 500px;
    margin: 50px auto 0;
}
.left-box{
    float: left;
    background: #ff9e2c;
    font-size: 30px;
    width: 50%;
    text-align: center;
    height: 300px;
    color: #fff;
    line-height: 300px;
}
.right-box{
    float: left;
    background: #b6701e;
    font-size: 30px;
    width: 50%;
    text-align: center;
    height: 300px;
    color: #fff;
    line-height: 300px;
}

    用绝对定位实现左右布局

    子绝父相

    body{
    margin: 0;
}
.wrap{
    position: relative;
    width: 1000px;
    margin: 50px auto 0;
}
.wrap div{
    position: absolute;
    font-size: 30px;
    width: 50%;
    text-align: center;
    height: 300px;
    color: #fff;
    line-height: 300px;
}
.left-box{ 
    top: 0;
    left: 0;
    background: #ff9e2c;
}
.right-box{
    top: 0;
    right:0;
    background: #b6701e;
}

    左中右布局

    最经典的双飞翼&圣杯布局简介：

    • 都是两侧定宽,中间自适应
    • 分左中右三个盒子，三个盒子都浮动。
    • 圣杯布局缩小时有滚动条，但能保证中间一定能显示出东西
    圣杯一般情况下.png 圣杯缩小情况下.png
    • 双飞翼布局缩到最小时，中间会消失，只剩左右

    双飞翼布局

    html代码:

    <body>
<div id="header"></div>
<!--中间栏需要放在前面-->
<div id="parent">
    <div id="center">
        <div id="center_inbox">中间自适应</div>
        <hr>  <!--方便观察原理-->
    </div>
    <div id="left">左列定宽</div>
    <div id="right">右列定宽</div>
</div>
<div id="footer"></div>
</body>

    css代码:

    #header {
    height: 60px;
    background-color: #ccc;
}
#left {
    float: left;
    width: 100px;
    height: 500px;
    margin-left: -100%; /*调整#left的位置,值等于自身宽度*/
    background-color: #f00;
    opacity: 0.5;
}
#center {
    height: 500px;
    float: left;
    width: 100%;
    background-color: #eeff2b;
}
#center_inbox{
    height: 480px;
    border: 1px solid #000;
    margin: 0 220px 0 120px;  /*关键!!!左右边界等于左右盒子的宽度,多出来的为盒子间隔*/
}
#right {
    float: left;
    width: 200px;
    height: 500px;
    margin-left: -200px;  /*使right到指定的位置,值等于自身宽度*/
    background-color: #0f0;
    opacity: 0.5;
}
#footer {
    clear: both;  /*注意清除浮动!!*/
    height: 60px;
    background-color: #ccc;
}

    圣杯布局方法

    html代码:

    <body>
<div id="header"></div>
<div id="parent">
    <!--#center需要放在前面-->
    <div id="center">中间自适应
        <hr>
    </div>
    <div id="left">左列定宽</div>
    <div id="right">右列定宽</div>
</div>
<div id="footer"></div>
</body>

    css代码:

    #header{
    height: 60px;
    background-color: #ccc;
}
#parent {
    box-sizing: border-box;
    height: 500px;
    padding: 0 215px 0 115px;  /*为了使#center摆正,左右padding分别等于左右盒子的宽,可以结合左右盒子相对定位的left调整间距*/
}
#left {
    margin-left: -100%;  /*使#left上去一行*/
    position: relative;
    left: -115px;  /*相对定位调整#left的位置,正值大于或等于自身宽度*/
    float: left;
    width: 100px;
    height: 500px;
    background-color: #f00;
    opacity: 0.5;
}
#center {
    float: left;
    width: 100%;  /*由于#parent的padding,达到自适应的目的*/
    height: 500px;
    box-sizing: border-box;
    border: 1px solid #000;
    background-color: #eeff2b;
}
#right {
    position: relative;
    left: 215px; /*相对定位调整#right的位置,大于或等于自身宽度*/
    width: 200px;
    height: 500px;
    margin-left: -200px;  /*使#right上去一行*/
    float: left;
    background-color: #0f0;
    opacity: 0.5;
}
#footer{
    height: 60px;
    background-color: #ccc;
}

    水平居中

    父子嵌套，parent>son的结构

    1.inline/inline-block

    父元素设置text-align: center

    .parent{
    text-align: center;
}
    2.单个块级元素

    子元素设置margin: 0 auto

    .son{
    width: 100px; /*必须定宽*/
    margin: 0 auto;
}
    3.多个块级元素

    父元素设置text-align: center，子元素设为inline/inline-block

    .parent{
    text-align: center;
}
.son{
    display: inline-block; /*改为行内或者行内块级形式，让text-align对其生效*/
}
    4.任意元素(flex)
    .parent{
    display: flex;
    justify-content: center;
}
    ★总结：

    对于水平居中，我们应该先考虑，哪些元素有自带的居中效果，最先想到的应该就是 text-align: center，但是这个只对行内内容有效，所以我们要使用 text-align: center 就必须将子元素设置为display: inline或者 display: inline-block
    其次就是考虑能不能用margin: 0 auto;

    垂直居中

    父子嵌套，parent>son的结构

    1.单行文本

    将父元素的 height 与line-height 设置为相同的值

    .parent{
    height: 150px;
    line-height: 150px;  
}
    2.多行文本

    第一种方法：将父元素设为display: table，同时子元素设置display: table-cell以及vertical-align: middle

    <div class="parent">
  <p class="child">在山的那边海的那边，有一群蓝精灵，他们活泼又聪明，他们调皮又灵敏
</p>
</div>

<style>
  .parent {
    display: table;
    width: 150px;
  }
  
  .child {
    display: table-cell;
    vertical-align: middle;
  }
</style>

    第二种方法：用p标签包裹多行文本内容，p标签改成inline-block元素
    原理：多行文字使用一个标签包裹，同时设置display: inline-block，保持了内联元素的特性，使元素具有单行效果

    <div class="parent">
<p class="child">在山的那边海的那边，有一群蓝精灵，他们活泼又聪明，他们调皮又灵敏</p>
</div>

<style>
.parent{
    line-height: 150px;

}
.child{
     display:inline-block;
     line-height:20px;
     vertical-align: middle;
} 
</style>
    3.图片

    将父元素的 height与line-height 设置为相同的值，子元素设置vertical-align: middle

    .parent{
    height: 150px;
    line-height: 150px;
    font-size: 0;
}
img.son{vertical-align: middle;} /*默认是基线对齐，改为middle*/
    4.块级元素

    分定高与不定高，定高就用注释里的方法

    .parent{
    position: relative;
}
.son{
    position: absolute;
    top: 50%;
    /*定高时margin-top:负自身高度一半;*/
    transform: translateY(-50%);
}
    5.任意元素(flex)
    .parent{
    display: flex;
    align-items: center;
}

    或者

    .parent{
    display: flex;
}
.son{
    align-self: center;
}

    或者

    .parent{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
    ★总结：
    • 对于垂直居中，最先想到的应该就是 line-height 了，但是这个只能用于行内内容；
    • 其次就是考虑能不能用vertical-align: middle ，不过这个一定要熟知原理才能用得顺手，可看vertical-align和line-height的基友关系 ；

    水平垂直居中

    1.inline/inline-block
    .parent{
    height: 150px;
    line-height: 150px;  /*行高的值与height相等*/
    text-align: center;
    font-size: 0;   /*消除幽灵空白节点的bug*/
}
.son{
    vertical-align: middle;
}
    2.块级元素

    用子绝父相，分定宽高和不定宽高，定宽高就用注释里的方法

    .parent{
    position: relative;
}
.son{
    position: absolute;
    top: 50%;
    left: 50%;
    /*定宽高时等同于margin-left:负自身宽度一半;margin-top:负自身高度一半;*/
    transform: translate(-50%,-50%); 
}
    3.flex
    .parent{
    display: flex;
}
.son{
    margin: auto;
}

    或者

    .parent{
    display: flex;
    justify-content: center;
    align-items: center;
}

    或者

    .parent{
    display: flex;
    justify-content: center;
}
.son{
    align-self: center;
}

    ★总结：

    • 一般情况下，水平垂直居中，我们最常用的就是绝对定位加负边距了，缺点就是需要知道宽高，使用transform倒是可以不需要，但是兼容性不好（ie9+）
    • 其次就是绝对居中，绝对定位设置top、left、right、bottom为0，然后margin:auto;让浏览器自动平分边距以达到水平垂直居中的目的
    • 如果是inline/inline-block这些内容，可以优先考虑line-height和vertical-align结合使用，不要忘了还有text-align

    小Tips:

    1.一般来说，将元素改成inline-block，都要加vertical-align: top

    2.inline元素中的非替换元素，对其设置margin-top和margin-bottom是无效的（margin左右有效）

    HTML 里的元素分为替换元素（replaced element）和非替换元素（non-replaced element）。

    • 替换元素是指用作为其他内容占位符的一个元素。最典型的就是img，它只是指向一个图像文件。以及大多数表单元素也是替换，例如input等。
    • 非替换元素是指内容包含在文档中的元素。例如，如果一个段落的文本内容都放在该元素本身之内，则这个段落就是一个非替换元素。

    讨论margin-top和margin-bottom对行内元素是否起作用，则要对行内替换元素和行内非替换元素分别讨论。

    行内替换元素：设置margin-top和margin-bottom是有效的

    而非替换元素margin-top和margin-bottom不生效，其原因就在于行内非替换元素的外边距不会改变一个元素的行高。

    vertical-align属性生效条件：当一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平）

    相关文章

      网友评论

          本文标题：CSS布局与水平垂直居中

          本文链接：https://www.haomeiwen.com/subject/tybjyqtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|CSS布局与水平垂直居中|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！