软件系统定制开发CSS居中方式总结

行内元素

1.软件系统定制开发和其他元素都在同一行
2.高，软件系统定制开发及外边距和内边距部分可以改变
3.软件系统定制开发宽度只与内容有关
4.软件系统定制开发行内元素只能容纳文本软件系统定制开发或者其他行内元素
5.a,img,input,lable,select,sapn,textarea,font

块级元素

1.总是在新行上开始，占据一整行
2.高度，行高以及外边距和内边距都课控制
3.宽度始终与浏览器的宽度一样，与内容无关
4.可以容纳行内元素和其他块级元素
5.div,p,table,form,h1,h2,h3,dl,ol,ul,li

居中方式分为三种：

• 水平居中
• 垂直居中
• 水平垂直居中

水平居中

1.行内元素水平居中

利用text-align:center可以实现行内元素水平居中
对行内元素(inline)，行内块(inline-block)，行内表(inline-table)，inline-flex也有效果。

<div class="center-text">    简单是稳定的前提。</div>
1
2
3

div {    height:60px;    border: 2px dashed #f69c55;}.center-text {    text-align: center;}
1
2
3
4
5
6
7

2.块级元素水平居中

通过把固定宽度的块级元素的margin-left和margin-right设成auto,就可以使块级元素水平居中

<div>    <p class="center-block">    </p></div>
1
2
3
4

div {    height:100px;    border: 2px dashed #f69c55;}.center-block {    margin: 0 auto;    width: 8rem;    padding:1rem;    color:#fff;    background:#000;}
1
2
3
4
5
6
7
8
9
10
11

3.多块级元素水平居中

方法一：利用inline-block
通过改变块级元素为inline-block和父容器的text-align属性来实现多块级元素水平居中

<div id="app">        <div class="center-block">           第一个块级元素        </div>        <div class="center-block">            第二个块级元素        </div>        <div class="center-block">            第三个块级元素        </div>    </div>
1
2
3
4
5
6
7
8
9
10
11

#app {    height:100px;    border: 2px dashed #f69c55;    text-align: center;}.center-block {         width: 200px;    padding:1rem;    color:#fff;    background:#000;    display: inline-block;   }
1
2
3
4
5
6
7
8
9
10
11
12
13

方法二：利用flex布局

    <div id="app">        <div class="center-block">            第一个块级元素        </div>        <div class="center-block">            第二个块级元素        </div>        <div class="center-block">            第三个块级元素        </div>    </div>
1
2
3
4
5
6
7
8
9
10
11

#app {    height: 100px;    border: 2px dashed #f69c55;    display: flex;    justify-content: center;}.center-block {    width: 200px;    padding: 1rem;    color: #fff;    background: #000;}
1
2
3
4
5
6
7
8
9
10
11
12
13

垂直居中

1.单行行内元素垂直居中

通过设置内联元素的高度(height)和行高(line-height)相等，从而使元素垂直居中

  <div id="app">            第一个块级元素    </div>
1
2
3

#app {    height: 100px;    border: 2px dashed #f69c55;    line-height: 100px;}
1
2
3
4
5

2.多行元素垂直居中

方法一：利用表格布局
利用表格布局的vertical-align:middle可以实现子元素的垂直居中

<div class="center-table">    <p class="v-cell">        The more technology you learn,<br>        the more you realize how little you know.    </p></div>
1
2
3
4
5
6

.center-table {    display: table;    height: 140px;    border: 2px dashed #f69c55;}.v-cell {    display: table-cell;    vertical-align: middle;}
1
2
3
4
5
6
7
8
9

方法二：利用flex布局
利用实现垂直居中

<div class="center-flex">    <p>        The more technology you learn,<br>        the more you realize how little you know.    </p></div>
1
2
3
4
5
6

.center-flex {    height: 140px;    display: flex;    flex-direction: column;    justify-content: center;    border: 2px dashed #f69c55;}
1
2
3
4
5
6
7

3.块级元素垂直居中

固定高度的块级元素
 已知居中元素的高度和宽度，通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，就可实现垂直居中。

<div class="parent">    <div class="child">世界上有 10 种人，懂二进制的和不懂二进制的。</div></div>
1
2
3

.parent {    height: 140px;    position: relative;    border: 2px dashed #f69c55;}.child {    position: absolute;    top: 50%;    height: 100px;    margin-top: -50px;    color:#fff;    background: #000;}
1
2
3
4
5
6
7
8
9
10
11
12
13

未知高度的块级元素
 高度未知，借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中，部分浏览器可能存在兼容性问题。

 <div class="parent">        <div class="child">世界上有 10 种人，懂二进制的和不懂二进制的。</div>    </div>
1
2
3

.parent {    height: 140px;    position: relative;    border: 2px dashed #f69c55;}.child {    position: absolute;    top: 50%;    transform: translateY(-50%);    background: black;    color: #fff;    padding: 1rem;    width: 12rem;}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

水平垂直居中

1.固定宽高水平垂直居中

利用margin，定位(多样，不再赘述)

2.未知宽高元素水平垂直居中

利用2D变化，在水平和垂直方向都反向平移宽高的一半

3.利用flex布局

 利用flex布局，其中justify-content用于设置或检索弹性盒子元素在主轴上方向上的对齐方式；而align-items属性定义flex子项在flex容器的当前行的侧轴方向上的对齐方式。

后记

 借鉴自：https://www.cnblogs.com/ghq120/p/10939835.html
在此基础上稍加改动，如有想了解更多关于flex布局，可跳转自下面这个网页
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html