布局总结-水平居中布局的实现

CSS布局

一、左右布局

1、float实现左右布局

                    <!DOCTYPE html>
                    <html lang="en">
                    <head>
                        <meta charset="UTF-8">
                        <link rel="stylesheet" href="index01.css">
                        <title>居中布局的几个实现方案</title>
                    </head>
                    <body>
                        <div class="left"></div>
                        <div class="right">DEMO</div>
                    </body>
                    </html>

标签结构很简单,就是一个父元素里面套了一个子元素

想要实现左右布局,只需要把<div class="left"></div>设置成向左浮动,右边向右浮动

.left{
    float: left;
}
.right{
    float: right;
}

或者把left和right设置成inline-block

.left{
    display: inline-block
}
.right{
    display: inline-block
}

二、居中布局

1、html结构

                    <!DOCTYPE html>
                    <html lang="en">
                    <head>
                        <meta charset="UTF-8">
                        <link rel="stylesheet" href="index01.css">
                        <title>居中布局的几个实现方案</title>
                    </head>
                    <body>
                        <div class="parent">
                            <div class="child">DEMO</div>
                        </div>
                    </body>
                    </html>

标签结构很简单,就是一个父元素里面套了一个子元素

2.用text-aligninline-block实现

  1. 首先text-align只针对inline元素有效,因此,可以在父元素设置text-align:center,然后改变子元素display:blockinline-block.
  2. index01.css的代码为:
                    .parent{
                        height: 200px;
                        background-color: gray;
                    
                        text-align: center;
                    }
                    .child{
                        background-color: yellowgreen;
                        height: 200px;
                        width: 200px;
                    
                        display: inline-block;
                    }

3.用display:tablemargin:0 auto实现

  1. 首先定宽的块级元素可以设置margin:0 auto实现水平居中
  2. display:table这个元素的作用就像 <table> 元素. 它定义了一个块级盒子.
  3. index02.css的代码为;

    .parent{
        height: 200px;
        background-color: gray;
    }
    
    /*display:table
    在表现形式上很像是block元素
    宽度跟着内容走。
    */
    .child{
        display: table;
        margin: 0 auto;
        background-color: greenyellow;
        height: 200px;
        width: 200px;
        text-align: center;
        line-height: 200px;
    }

4.用position:absoluteleft: 50%以及transform: translateX(-50%)实现

  1. 首先对父元素设置position: relative
  2. 对子元素设置绝对定位,相对于父元素定位
  3. left:50%则可以根据左边进行定位
  4. 根据transform,则可以根据自身的宽度偏移
  5. index03.css的代码为:

        .parent{
            height: 200px;
            background-color: gray;
            position: relative;
        }
        .child{
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            height: 200px;
            background-color: greenyellow;
        }

5.用flex+justify-content实现

  1. 对父元素设置display:flex,则第一级子元素是flex-item
  2. 对子元素设置justify-content: center;就可以实现居中

/////////

  1. 也可以对子元素设置margin:0 auto实现居中
  2. index04.css的代码为:

        .parent{
            height: 200px;
            background-color: gray;
            display: flex;    
            justify-content: center;
        }
        .child{
            height: 200px;
            background-color: greenyellow;
            /*  margin: 0 auto;  */
        }

三、左中右布局

左中右布局参考一的左右布局,可将三个元素都设置成float:left
或者将三个元素都设置成dispaly:inline-block

四、垂直居中

  1. heightline-height设置垂直居中
  2. display:flex和align-items: center`
  3. 行级元素设置vertial-align: middle

只有那些疯狂的人才能引起我的兴趣,那些人疯狂地生活,疯狂地表达,同时对一切事物心怀渴望,他们毫无...

446 声望
21 粉丝
0 条评论
推荐阅读
补全一段jQuery代码
主要思路是,window.$ = jQuery所以window.jQuery要等于一个函数,这个函数接收一个参数,返回一个对象,返回的对象包含两个方法,这两个方法可以添加text文本和添加class类

yangdepp3阅读 1.1k

【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5.6k评论 10

封面图
你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan20阅读 1.5k评论 1

封面图
那些不用js也能实现的效果
本文首发于公众号:GitWeb,欢迎关注,接收首发推文本文列举几个不需要使用js也能实现的效果一、页面回到顶部回到顶部是页面开发中很常见的一个功能,一般的做法是对回到顶部组件做一个监听,当用户点击的时候,...

Winn11阅读 1.1k评论 4

封面图
Three.js 进阶之旅:全景漫游-初阶移动相机版
3D 全景技术可以实现日常生活中的很多功能需求,比如地图的街景全景模式、数字展厅、在线看房、社交媒体的全景图预览、短视频直播平台的全景直播等。Three.js 实现全景功能也是十分方便的,当然了目前已经有很多...

dragonir12阅读 1.4k

封面图
英雄联盟比赛选手的六芒星能力图动画是如何制作的?
最近,在看 LPL 比赛的时候,看到这样一个有意思的六芒星能力图动画:今天,我们就来使用纯 CSS 实现这样一个动画效果!实现背景网格对于如下这样一个背景网格,最好的方式当然肯定是切图。如果一定要使用 CSS,...

chokcoco12阅读 1.2k

封面图
巧用 CSS 变量,实现动画函数复用,制作高级感拉满的网格动画
这里我们借助了上面 #12、结构性伪类 中的 :root{ } 伪类,在全局 :root{ } 伪类中定义了一个 CSS 变量,取名为 --bgColor 。

chokcoco11阅读 2.9k

封面图

只有那些疯狂的人才能引起我的兴趣,那些人疯狂地生活,疯狂地表达,同时对一切事物心怀渴望,他们毫无...

446 声望
21 粉丝
宣传栏