左右布局

<div class="parent clearfix">
  <div class="leftChild">good</div>
  <div class="rightChild">morning</div>
</div>

利用float实现

.clearfix::after{
  content:"";
  display:block;
  clear:both;
}
.leftChild,
.rightChild{
  float:left;
  border: 1px solid red;
}

利用position实现

.partent{
  position: relative;
}
.leftChild{
  position: absolute;
  left: 0;
  top: 0;
}
.rightChild{
  position: absolute;
  left: 200px;
  top: 0;
}

左中右布局

<div class="parent clearfix">
  <div class="leftChild">good</div>
  <div class="centerChild">are you ok</div>
  <div class="rightChild">morning</div>
</div>

利用float实现

.clearfix::after{
  content:"";
  display:block;
  clear:both;
}
.leftChild,
.centerChild,
.rightChild{
  float:left;
  border: 1px solid red;
}

利用position实现

.partent{
  position: relative;
}
.leftChild{
  position: absolute;
  left: 0;
  top: 0;
}
.centerChild{
  position: absolute;
  left: 100px;
  top: 0;
}
.rightChild{
  position: absolute;
  left: 200px;
  top: 0;
}

水平居中

水平居中可分为行内元素水平居中和块级元素水平居中

1.1行内元素水平居中

只需要给父元素设置text-aligh:center即可实现

.center{
  text-align:center;
}

1.2块级元素水平居中

定宽块级元素水平居中
只需给需要居中的块级元素加margin:0 auto即可，但是这里块元素的宽度width值一定要有

.center{
  width:200px;
  margin:0 auto;
  border:1px solid red;
}

不定宽块级元素水平居中
不定宽，即块级元素宽度不固定
方法1：设置table
通过给要居中显示的元素，设置display:table，然后设置margin:0 auto来实现

.center{
  display:table;
  margin:0 auto;
  border:1px solid red;
}

方法2:设置inline-block
子元素设置inline-block,同时父元素设置text-align:center

.center{
  text-align:center;
}
.inlineblock-div{
  display:inline-block;
}
<div class="center">
  <div class="inlineblock-div">1</div>
  <div class="inlineblock-div">2</div>
</div>

垂直居中

2.1单行文本垂直居中

设置padding-top=padding-bottom;或line-height=height;

2.2多行文本垂直居中

通过设置父元素table,子元素table-cell和vertical-align
vertical-align:middle的意思是把元素放在父元素的中部

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
        .center{
            width:200px;
            height:300px;
            display:table;
            border:2px solid blue;
        }
        .table-div{
            display:table-cell;
            vertical-align:middle;
            border:1px solid red;
        }
        </style>
    </head>
    <body>
        <div class="center">
            <div class="table-div">helloworld</div>
        </div>
    </body>
</html>

2.3块级元素垂直居中

方法1：利用position和top和负margin

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
        .parent{
            width:200px;
            height:300px;
            position:relative;
            border:1px solid blue;
        }
        .child{
            background:red;
            position: absolute;
            height: 100px;
            width: 150px;
            top:50%;
            margin-top:-50px;
            line-height: 100px;
        }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="child">areyouok</div>
        </div>
    </body>

方法3:利用position和top/bottom和margin:auto

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
        .parent{
            width: 200px;
            height: 200px;
            position:relative;
            border: 1px solid blue;
        }
        .child{
            background:red;
            position:absolute;
            height: 100px;
            width: 150px;
            top:0;
            bottom:0;
            margin:auto;
            line-height:100px;
        }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="child">are you ok</div>
        </div>
    </body>

3.水平垂直居中

方法1：绝对定位+margin:auto;

div{
  width: 200px;
  height: 200px;
  background: green;
  position:absolute;
  left:0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

方法2：绝对定位+负margin

div{
  width:200px;
  height: 200px;
  background:green;
  position: absolute;
  left:50%;
  top:50%;
  margin-left:-100px;
  margin-top:-100px;
}

方法3：绝对定位+transform

div{
  width: 200px;
  height: 200px;
  background: green;
  position:absolute;
  left:50%; /* 定位父级的50% */
  top:50%;
  transform: translate(-50%,-50%); /*自己的50% */
}