css基础 CSS 布局 – Overflow、Float 浮动、CSS 布局 – 水平 垂直居中对齐

这似乎是为滚动条预留的空间。当使用 position 属性时，请始终设置 !DOCTYPE 声明：

DOCTYPE html>


    
    
    
        body {
            margin: 0;
            padding: 0;
        }
        .container {
            position: relative;
            width: 100%;
        }
        .right {
            position: absolute;
            right: 0px;
            width: 300px;
            background-color: #b0e0e6;
        }
    




    
        注意: 当使用浮动属性对齐，总是包括 !DOCTYPE 声明!如果丢失，它将会在 IE 浏览器产生奇怪的结果。
    

我们也可以使用 float 属性来对齐元素。

以下实例演示了使用 float 属性来实现右对齐:

DOCTYPE html>


    
    
    
       .right {
            float: right;
            width: 300px;
            border: 3px solid #73AD21;
            padding: 10px;
        }
    




    一个十一二岁的少年，项带银圈，手摸一柄钢叉，向一匹猹尽力地刺去。

当像这样对齐元素时，对 元素的外边距和内边距进行预定义是一个好主意。 这样可以避免在不同的浏览器中出现可见的差异。

注意： 如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候你可以使用 “clearfix(清除浮动)” 来解决该问题。

我们可以在父元素上添加 overflow: auto; 来解决子元素溢出的问题:

DOCTYPE html>


    
    
    
        div {
            border: 3px solid #4CAF50;
            padding: 5px;
        }
        .img1 {
            float: right;
        }
        .clearfix {
            overflow: auto;
        }
        .img2 {
            float: right;
        }
    



以下实例图在父元素中溢出，很不美观:


    
    wgchen - 前端博客，记录前端开发的个人技术博客！！！


在父元素上通过添加 clearfix 类，并设置 overflow: auto; 来解决该问题:


    
        wgchen - 前端博客，记录前端开发的个人技术博客！！！

当使用 float 属性时，IE8 以及更早的版本存在一个问题。 如果省略 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。

当使用 float 属性时，请始终设置 !DOCTYPE 声明：

CSS 中有很多方式可以实现垂直居中对齐。 一个简单的方式就是头部顶部使用 padding：

.center {
    padding: 70px 0;
    border: 3px solid green;
}

果要水平和垂直都居中，可以使用 padding 和 text-align: center:

.center {
    padding: 70px 0;
    border: 3px solid green;
    text-align: center;
}

.center {
    line-height: 200px;
    height: 200px;
    border: 3px solid green;
    text-align: center;
}
 
/* 如果文本有多行，添加以下代码: */
.center p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}

除了使用 padding 和 line-height 属性外，我们还可以使用 transform 属性来设置垂直居中。

以下实例中，我们使用了 position 和 transform 属性来设置水平和垂直居中：

.center { 
    height: 200px;
    position: relative;
    border: 3px solid green; 
}
 
.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

设定行高是垂直居中最简单的方式， 适用于「单行」的「行内元素」 ( inline、inline-block )。

例如单行的标题，或是已经设为 inline-block 属性的 div。

若将 line-height 设成和高度一样的数值，则内容的行内元素就会被垂直置中。因为是行高，所以会在行内元素的上下都加上行高的1/2，所以就垂直置中了！

不过由此就可以看出，为什么必须要单行的行内元素，因为如果多行，第二行与第一行的间距会变超大，就不是我们所期望的效果了。

CSS范例：外层 div0，内容 redbox，让 redbox 水平垂直置中。

DOCTYPE html>


    
    
    
        .div0{
            width:200px;
            height:150px;
            border:1px solid #000;
            line-height:150px;
            text-align:center;
        }
        .redbox{
            display:inline-block;
            width:30px;
            height:30px;
            background:#c00;
        }
    




    

    将

刚刚第一种方法，虽然是最简单的方法(适用于单行标题)。

不过就是只能单行，所以我们如果要让多行的元素也可以垂直居中，就须要使用伪元素的方式。

在此之前，先解释一下CSS里头 vertical-align 这个属性，这个属性虽然是垂直置中，不过却是指在元素内的所有元素垂直位置互相置中，并不是相对于外框的高度垂直居中。 (下面的CSS会造成这种样子的垂直居中)

DOCTYPE html>


    
    
    
        .div0{
            width:200px;
            height:150px;
            border:1px solid #000;
            text-align:center;
        }
        .redbox{
            width:30px;
            height:30px;
            background:#c00;
            display:inline-block;
            vertical-align:middle;
        }
        .greenbox{
            width:30px;
            height:60px;
            background:#0c0;
            display:inline-block;
            vertical-align:middle;
        }
        .bluebox{
            width:30px;
            height:40px;
            background:#00f;
            display:inline-block;
            vertical-align:middle;
        }
    




    
    
    

因此，如果有一个方块变成了高度 100%，那么其他的方块就会真正的垂直居中。

.greenbox{
    width:30px;
    height:100%;
    background:#0c0;
    display:inline-block;
    vertical-align:middle;
}

看到这边或许会有疑问，如果今天我的 div 必须是 block，我该怎么让它垂直居中呢？

这时候就必须用到CSS特有的 calc 动态计算的能力，我们只要让要居中的 div 的 top 属性，与上方的距离是「50%的外框高度+ 50%的div高度」，就可以做到垂直居中。

至于为什么不用 margin-top，因为 margin 抓到的是水平高度，必须要用 top 才会正确。

DOCTYPE html>


    
    
    
        .div0{
            width:200px;
            height:150px;
            border:1px solid #000;
        }
        .redbox{
            position:relative;
            width:30px;
            height:30px;
            background:#c00;
            float:left;
            top:calc(50% - 15px);
            margin-left:calc(50% - 45px);
        }
        .greenbox{
            position:relative;
            width:30px;
            height:80px;
            background:#0c0;
            float:left;
            top:calc(50% - 40px);
        }
        .bluebox{
            position:relative;
            width:30px;
            height:40px;
            background:#00f;
            float:left;
            top:calc(50% - 20px);
        }
    




    
    
    

或许有些人会发现，在表格这个HTML里，要实现垂直置中是相当容易的，只需要下一行vertical-align:middle 就可以，为什么呢？

最主要的原因就在于 table 的 display 是 table，而 td 的 display 是 table-cell，所以我们除了直接使用表格之外，也可以将要垂直置中元素的父元素的 display 改为t able-cell，就可以轻松实现，

不过修改 display 有时候也会造成其他样式属性的连动影响，需要小心使用。

DOCTYPE html>


    
    
    
        .like-table {
            display: table-cell;
        }

        td,
        .like-table {
            width: 150px;
            height: 100px;
            border: 1px solid #000;
            vertical-align: middle;
        }

        td div,
        .like-table div {
            width: 100px;
            height: 50px;
            margin: 0 auto;
            color: #fff;
            font-size: 12px;
            line-height: 50px;
            text-align: center;
            background: #c00;
        }

        .like-table div {
            background: #069;
        }
    



    
        
            
                表格垂直居中
            
        
    
    
        假的表格垂直居中
    

transform是CSS3的新属性，主要用于元素的变形、旋转和位移，利用 transform 里头的translateY (改变垂直的位移，如果使用百分比为单位，则是以元素本身的长宽为基准)，搭配元素本身的 top 属性，就可以做出垂直居中的效果，需要注意的地方是，子元素必须要加上 position:relative，不然就会没有效果喔。

DOCTYPE html>


    
    文字竖直方向居中显示
    
        .use-transform{
            width:200px;
            height:200px;
            border:1px solid #000;
        }
        .use-transform div{
            position: relative;
            width:100px;
            height:50px;
            top:50%;
            left: 25%;
            transform:translateY(-50%);
            background:#095;
        }
    



    
        文字竖直方向居中显示
    

绝对定位就是CSS里头的 position:absolute，利用绝对位置来指定。

但垂直置中的做法又和我们正统的绝对位置不太相同，是要将上下左右的数值都设为 0，再搭配一个 margin:auto，就可以办到垂直置中。

不过要特别注意的是，设定绝对定位的子元素，其父元素的 position 必须要指定为 relative喔！而且绝对定位的元素是会互相覆盖的，所以如果内容元素较多，可能就会有些问题。

DOCTYPE html>


    
    文字竖直方向居中显示
    
        .use-absolute{
            position: relative;
            width:200px;
            height:150px;
            border:1px solid #000;
        }
        .use-absolute div{
            position: absolute;
            width:100px;
            height:50px;
            top:0;
            right:0;
            bottom:0;
            left:0;
            margin:auto;
            background:#f60;
        }
    



    
        文字竖直方向居中显示
    

Flexbox 可谓是我们在移动端用的最多的布局方法，因为大部分现代手机浏览器都支持这个方法了。Flexbox，使用 align-items 或 align-content 的属性，轻轻松松就可以做到垂直居中的效果喔！

DOCTYPE html>


    
    文字竖直方向居中显示
    
        .use-flexbox{
            display:flex;
            align-items:center;
            justify-content:center;
            width:200px;
            height:150px;
            border:1px solid #000;
        }
        .use-flexbox div{
            width:100px;
            height:50px;
            background:#099;
        }
    



    
        文字竖直方向居中显示