css对齐方案总结

marek 发布于2019-04-23 11:45 / 1262人阅读

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

css对齐方案总结

垂直居中

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

利用flex:
核心代码:

.container{
    display:flex;
     flex-direction:column;
     justify:center
}

利用transformX(-50%):
核心代码:

.container{
            width: 300px;
            height: 300px;
            background: red;
            position:relative;
        	}
.child{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
 			}

内敛元素的垂直居中

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

.container {
    height: 120px;
    line-height: 120px;
}

块状元素

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

.container{
    position: relative;
}
.child{
    position: absolute;
      top: 50%;
      height: 100px;
      margin-top: -50px; 
}

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

水平居中

通用布局方式

flex布局
核心代码：

.container{
display: flex;  
              justify-content: center;
}

absoulte+transform
核心代码:

.container{
position:relative;
}
.child{
  position: absolute;
                left: 50%;
                transform: translateX(-50%);
}

内敛元素水平居中

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

块状元素水平居中

使用 margin:0 auto 必须注明子元素和父元素的宽度
核心代码:
1
2
3
.container{
margin:0 auto
}
多块状元素：
利用内敛元素布局方式container属性为text-align:center;
核心代码:
1
2
3
4
5
6
.container{
text-align: center;
}
.child{
display: inline-block;
}

水平垂直居中

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

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

.container {
    position: relative;
}
.child {
    width: 300px;
    height: 100px;
    padding: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -70px 0 0 -170px;
}

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

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

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

利用flex布局
利用flex布局，其中justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式；而align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
核心代码：
1
2
3
4
5
.container {
display: flex;
justify-content: center;
align-items: center;
}

相对于 body 的水平垂直居中

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

.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;
}

position 布局
核心代码

.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还是移动端开发,我们经常会遇到,这样一个问题:父元素内包裹子元素,而子元素的宽度是未知的,如何让子元素,左右居中呢?经过实战演练,...

selfimpr 2019-08-20 11:07 评论0 收藏0
CSS Tips------未知宽度高度居中对齐<三种最优解决方案>

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

alphahans 2019-08-01 15:44 评论0 收藏0
CSS Tips------未知宽度高度居中对齐<三种最优解决方案>

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

big_cat 2019-08-29 11:19 评论0 收藏0