html+css常见布局实现方法

前言 

这是一篇关于html+css布局的总结博文，这些布局在日常开发中非常常见。本文提供的方法只是其中一种，现实中解决问题的办法往往不止一种，且需要具体问题具体分析。

 

本文主要讲述的布局

1.字体居中:水平居中、垂直居中；

2.多个div元素水平分布；

3.单个div元素居中：水平居中、垂直居中；

背景是以上所有情况外面都套着一层div，如下：

1.情况一:    
    

        一段文字
    

2.情况二：
    

        

        

        

    

3.情况三：
    

        

    

 

字体居中

1.水平居中

重要css代码（代码放的位置请看实例，不一定全部放一起，这里不再详细区分）:

text-align: center;

实例：

    




    
布局总结

效果：

 

2.垂直居中 

重要css代码:

line-height: 400px；
justify-content: center;

要注意的是，line-height的高度要跟元素div的高度保持一致。

实例：

    




    

        布局总结
    

效果：

如果想让字体垂直、水平居中，当然把以上两部分的代码结合起来就行

实例：

    




    

        布局总结
    

 效果：

多个div水平分布

重要css代码：

display: flex; 
justify-content: space-around;

flex是一个异常强大的布局，这个工具能使同级的元素按照特定样式实现快速布局，如 以上的第二行代码，使得3个元素等分剩余空间，使得他们能够分布在屏幕中间并且间隔相等。

推荐学习链接：Flex 布局教程:语法篇 - 阮一峰

实例：

    




    

        

            布局1
        
        

            布局2
        
        

            布局3
        
    

效果：

单个div居中

1.水平居中

重要css代码：

 margin: 0 auto;

margin: 0 auto; 第一个参数设置元素到父级元素上下外边距的距离，其中0代表上下外边距都为0，第二个参数设置元素到父元素左右外边距的距离，其中auto代表左右自动等分剩余空间，既然是等分剩余空间，当然是会使得元素基于父元素水平居中了。可能有人会想把0设置成auto，就能使得元素基于父元素垂直居中，事实上，这个方法行不通，在此背景下，无论把第一个参数设置成什么值，样式都不会有任何变化。

实例：

    




    

        

            布局
        
    

效果：

2.垂直居中

重要css代码：

display: flex;
align-items: center;

align-items: center;意思是将flex布局下的所有元素垂直居中。网上会提供更多的方法，其中比较多人提到的是利用绝对定位和相对定位来使得元素居中，那种方法会更加灵活，但如果只是简单想要使得元素居中，本文提供的方法更为简洁一些。

实例：

    




    

        

            布局
        
    

效果：