CSS网页元素居中

时间：2022-08-20 17:22:48

1.水平居中：行内元素解决方案

只需要把行内元素包裹在一个属性display为block的父层元素中，并且把父层元素添加如下属性即可：

text-align: center

适用元素：文字，链接，及其其它inline或者inline-*类型元素（inline-block，inline-table，inline-flex）

2.水平居中：块状元素解决方案

对于块状元素（display:block）来说，我们需要将它的左右外边距（即，margin-left，margin-right）设置为auto，即可实现块状元素的居中，如下：

  1. .center{
  2. /* 这里可以设置顶端外边距 */
  3. margin: 10px auto;
  4. }

3.水平居中：多个块状元素解决方案

如果页面里有多个块状元素需要水平排列居中，可以将元素的display属性设置为inline-block，并且把父元素的text-align属性设置为center即可实现。

4. 水平居中：多个块状元素解决方案 (使用flexbox布局实现)

使用flexbox布局，只需要把待处理的块状元素的父元素添加属性display:flex及justify-content:center即可

5.垂直居中：单行的行内元素解决方案

当一个行内元素，即inline，inline-*类型的元素需要居中的话，可以将它的height和line-height同时设置为父元素的高度即可实现垂直居中效果。

    1. #container{
    2. background: #222;
    3. height: 200px;
    4. }
    5. /*  以下代码中，将a元素的height和line-height设置的和父元素一样高度即可实现垂直居中 */
    6. a{
    7. height: 200px;
    8. line-height:200px;
    9. color: #FFF;
    10. }

    6.垂直居中：多行的行内元素解决方案

    组合使用display:table-cell和vertical-align:middle属性来定义需要居中的元素的父容器元素生成效果，如下：

    1. .container{
    2. background: #222;
    3. width: 300px;
    4. height: 300px;
    5. /* 以下属性垂直居中 */
    6. display: table-cell;
    7. vertical-align:middle;
    8. }

    7.垂直居中：已知高度的块状元素解决方案

    定义居中元素的相关属性，如下：

    1. /* 以下为居中代码 */
    2. .item{
    3. top: 50%;
    4. margin-top: -50px;
    5. position: absolute;
    6. padding:0;
    7. }

    8. 垂直居中：未知高度的块状元素解决方案

    对于无法知道高度的元素，使用transform属性来垂直移动来实现垂直居中：

    1. .item{
    2. top: 50%;
    3. position: absolute;
    4. transform: translateY(-50%); /* 这里我们使用css3的transform来达到类似效果 */
    5. }

    9.水平垂直居中：已知高度和宽度的元素解决方案

    类似我们前面学到的方法，我们可以设置元素定位为absolute，并且设置top, left绝对值为50%，margin-top和margin-left为元素高度一半的负值即可，如下：

    1. .item{
    2. position: absolute;
    3. top: 50%;
    4. left: 50%;
    5. margin-top: -75px;
    6. margin-left: -75px;
    7. }

    10.水平垂直居中：使用flex布局实现

    相关代码如下：

    1. .parent{
    2. display: flex;
    3. justify-content:center;
    4. align-items: center;
    5. /* 注意这里需要设置高度来查看垂直居中效果 */
    6. background: #AAA;
    7. height: 300px;

    }

    11.水平垂直居中：使用flex布局实现

    相关代码如下：

    1. .parent{
    2. display: flex;
    3. justify-content:center;
    4. align-items: center;
    5. /* 注意这里需要设置高度来查看垂直居中效果 */
    6. background: #AAA;
    7. height: 300px;
    8. }

    相关代码参考：http://www.gbtags.com/gb/gbliblist/20.htm

    相关文章