左右布局(浮动布局)：

1.使用左浮动来实现这个效果,这也是我目前最常用的一种方法。一般使用在希望把并列的东西，在同一行内显示。这时为了消除不必要的影响，要在父级元素上加上clearfix属性来清除浮动。
使用的代码如下

image.png

效果如下

image.png

2.使用float+magin-left的方法来实现，这个功能。具体做法是把一个块级元素floa：left。同时把和他并列的块级元素设一个magin-left值，宽高与设置浮动的块级元素相同。
代码如下

image.png

效果如下

image.png

这样做的好处就是，右边的块级元素的宽度会自适应。感觉实际开发中使用的比较多。

左中右布局

1.使用左浮动，思路跟左右布局是一样的，无非就是3个块级元素排成一排。具体也没用过，不知道好不好用

代码如下

image.png

效果如下

image.png

2.使用绝对定位，让中间的块级元素左右两边都留出左右的边距，并把左中右都加上绝对定位

代码如下

image.png

效果如下

image.png

水平居中

元素主要分为块级元素和行内元素，所以对元素进行水平居中也分这两种情况来讨论，另外块级元素的实现比较复杂，将分情况讨论。

1.行内元素 常用行内元素为a/img/input/span 等，标签内的HTML文本也属于此类。对于此类情况，水平居中是通过给父元素设置 text-align:center来实现的。代码如下

image.png

2.块级元素 常用块级元素为div/table/ul/dl/form/h1/p等。根据应用场景不同又分为定宽块级与不定宽块级两种情况，分别讨论。

1.定宽块级元素 满足定宽和块状两个条件的元素是可以通过设置左右margin”值为“auto”**来实现居中的。代码如下

          ![image.png](https://upload-images.jianshu.io/upload_images/17216602-cec3c565507a9147.png?imageMogr2/auto-                orient/strip%7CimageView2/2/w/1240)

            效果如下
              ![image.png](https://upload-images.jianshu.io/upload_images/17216602-c2d0f9529093b0d8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

 2.不定宽块级元素 我们经常会遇到不定宽度块级元素的使用，如分页导航，因为分页的数目不定，所以不能用宽度限制住，这时实现居中一共有三种做法，这里我觉得最简单的是把块级元素设定成inline-block，然后使用text-align ：center就可以是它居中显示。代码如下

image.png

效果如下

image.png

垂直居中

1.line-height=height，大多数情况下管用。简单来说就是使行高等于高度，这样就能做到垂直居中、

2.调整padding,margin，在第一种情况不合适的情况下，可以在他的外面套一个块级元素。然后通过调整内外边距的方法进行垂直居中。