资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/css对齐方案总结

css对齐方案总结

marek / 1243人阅读

摘要：核心代码利用布局利用布局，其中用于设置或检索弹性盒子元素在主轴横轴方向上的对齐方式而属性定义子项在容器的当前行的侧轴纵轴方向上的对齐方式。核心代码相对于的水平垂直居中列表布局兼容性好核心代码布局核心代码

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;
    	}
GPU云服务器 云服务器 ddos防御方案总结 水平对齐 文字对齐 无法对齐

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1106.html

相关文章

  • CSS Tips------未知宽度高度居中对齐<三种最优解决方案>

    摘要：前言无论是还是移动端开发我们经常会遇到这样一个问题父元素内包裹子元素而子元素的宽度是未知的如何让子元素左右居中呢经过实战演练及资料搜索感觉以下三种方法是最优的解决方案有需要的同学可以看看相互交流共同学习以下三种方案的主题结构如下子元素内容布 前言 无论是pc还是移动端开发,我们经常会遇到,这样一个问题:父元素内包裹子元素,而子元素的宽度是未知的,如何让子元素,左右居中呢?经过实战演练,...

    big_cat 评论0 收藏0

  • CSS Tips------未知宽度高度居中对齐<三种最优解决方案>

    摘要：前言无论是还是移动端开发我们经常会遇到这样一个问题父元素内包裹子元素而子元素的宽度是未知的如何让子元素左右居中呢经过实战演练及资料搜索感觉以下三种方法是最优的解决方案有需要的同学可以看看相互交流共同学习以下三种方案的主题结构如下子元素内容布 前言 无论是pc还是移动端开发,我们经常会遇到,这样一个问题:父元素内包裹子元素,而子元素的宽度是未知的,如何让子元素,左右居中呢?经过实战演练,...

    selfimpr 评论0 收藏0

  • CSS Tips------未知宽度高度居中对齐<三种最优解决方案>

    摘要：前言无论是还是移动端开发我们经常会遇到这样一个问题父元素内包裹子元素而子元素的宽度是未知的如何让子元素左右居中呢经过实战演练及资料搜索感觉以下三种方法是最优的解决方案有需要的同学可以看看相互交流共同学习以下三种方案的主题结构如下子元素内容布 前言 无论是pc还是移动端开发,我们经常会遇到,这样一个问题:父元素内包裹子元素,而子元素的宽度是未知的,如何让子元素,左右居中呢?经过实战演练,...

    alphahans 评论0 收藏0

  • css两种垂直居中对齐解决方案

    第一种垂直居中方法 利用vertical-align：middle进行垂直方向上的居中对齐，此方法需要满足的条件： 设置父元素的行高line-height等于父元素height的高度 子元素必须是行内块级元素display:inline-block; 子元素设置vertical-align：middle 此方法在开发中不能右浮动(不能靠右边) 下方是完整代码，可以新建一个HTML文件进行测...

    elarity 评论0 收藏0

发表评论

登陆后可评论

0条评论

marek

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<