css对齐方案总结

Posted weigaojie

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css对齐方案总结相关的知识,希望对你有一定的参考价值。

垂直居中

通用布局方式(内敛元素和块状元素都适用)

  1. 利用flex:
    核心代码:

    1
    2
    3
    4
    5
    .container{
    display:flex;
    flex-direction:column;
    justify:center
    }
  2. 利用transformX(-50%):
    核心代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .container{
    width: 300px;
    height: 300px;
    background: red;
    position:relative;
    }
    .child{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    }

内敛元素的垂直居中

单行内敛元素:设置内敛元素的高度和行高相等
核心代码:

1
2
3
4
.container {
height: 120px;
line-height: 120px;
}

 

块状元素

  1. 固定元素高度的块状元素
    核心代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .container{
    position: relative;
    }
    .child{
    position: absolute;
    top: 50%;
    height: 100px;
    margin-top: -50px;
    }
  2. 未知高度的块状元素
    当垂直居中的元素的高度和宽度未知时,我们可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题。
    核心代码:

    1
    2
    3
    4
    5
    6
    7
    8
    .container {
    position: relative;
    }
    .child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    }

水平居中

通用布局方式

  1. flex布局
    核心代码:

    1
    2
    3
    4
    .container{
    display: flex;
    justify-content: center;
    }
  2. absoulte+transform
    核心代码:

    1
    2
    3
    4
    5
    6
    7
    8
    .container{
    position:relative;
    }
    .child{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    }

内敛元素水平居中

  1. text-align:center
    核心代码:
    1
    2
    3
    .container{
    text-align:center
    }

块状元素水平居中

  1. 使用 margin:0 auto 必须注明子元素和父元素的宽度
    核心代码:

    1
    2
    3
    .container{
    margin:0 auto
    }
  2. 多块状元素:
    利用内敛元素布局方式container属性为text-align:center;
    核心代码:

    1
    2
    3
    4
    5
    6
    .container{
    text-align: center;
    }
    .child{
    display: inline-block;
    }

水平垂直居中

固定宽高元素水平垂直居中

通过margin平移元素整体宽度的一半,使元素水平垂直居中。
核心代码:

1
2
3
4
5
6
7
8
9
10
11
12
.container {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}

 

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

  1. 利用2D变换,在水平和垂直两个方向都向反向平移宽高的一半,从而使元素水平垂直居中。
    核心代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .parent {
    position: relative;
    }
    .child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }
  2. 利用flex布局
    利用flex布局,其中justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式;而align-items属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。
    核心代码:

    1
    2
    3
    4
    5
    .container {
    display: flex;
    justify-content: center;
    align-items: center;
    }

相对于 body 的水平垂直居中

  1. 列表布局(兼容性好)
    核心代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    .outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
    }

    .middle {
    display: table-cell;
    vertical-align: middle;
    }

    .inner {
    margin-left: auto;
    margin-right: auto;
    width: 400px;
    }
  2. position 布局
    核心代码

    1
    2
    3
    4
    5
    6
    7
    8
    .container{
    position: absolute;
    margin: auto;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    }

以上是关于css对齐方案总结的主要内容,如果未能解决你的问题,请参考以下文章

css 快速片段将svg与中心对齐并缩放到视口大小。

CSS文字处理实用小技巧总结

Tailwind.css 体验总结

Tailwind.css 体验总结

动态中心对齐 ViewPager

转 CSS制作水平垂直居中对齐各种方法总结