常见的div居中对齐方式

Karuru 发布于2019-08-29 13:18 / 3415人阅读

摘要：前段时间面试的时候面试题里面对考察最多的就是居中对齐的问题，因此特地对居中对齐的方式做了一个简单的总结，本文的目标就是希望各位在以后根据不同的情况使用不同的居中方式，闲话少说，直接上代码布局实现父元素设置为使

前段时间面试的时候面试题里面对css考察最多的就是div居中对齐的问题，因此特地对div居中对齐的方式做了一个简单的总结，本文的目标就是希望各位在以后根据不同的情况使用不同的居中方式，闲话少说，直接上代码

Flex布局实现

.wrapper{
    display: flex;
    width: 500px;
    height: 500px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    justify-content: center;
    align-items: center;
    background-color: #000;
}
.wrapper .inner{
    width: 300px;
    height: 300px;
    background-color: #666;
}

父元素display设置为flex,使用flexbox布局，在此布局下的元素就具备了伸缩的特性，再通过justify-content设置元素主轴上的对齐方式center,即可实现水平方向上的对齐，再利用align-items设置侧轴上的对齐方式center,即可实现垂直方向上的对齐

流体特性

 .wrapper{
    position: relative;
    width: 500px;
    height: 500px;
    background-color: #000;
}
.wrapper .inner{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 300px;
    height: 300px;
    background-color: #666;
}

当一个绝对定位元素，其对立方向属性同时具有数值时，其流体特性就触发了，margin当两侧的值都是auto时会平分剩余空间的大小，因此当四个方向都是auto时就可以实现水平和垂直方向的居中

transform平移

.wrapper{
    position: relative;
    width: 500px;
    height: 500px;
    background-color: #000;
}
.wrapper .inner{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: 300px;
    height: 300px;
    background-color: #666;
}

已知宽高绝对定位

.wrapper{
    position: relative;
    width: 500px;
    height: 500px;
    background-color: #000;
}
.wrapper .inner{
    position: absolute;
    margin-top: 50%;
    margin-left: 50%;
    top: -150px;
    left: -150px;
    width: 300px;
    height: 300px;
    background-color: #666;
}

以上内容是个人的一点总结，如果有错误或不严谨的地方，欢迎批评指正，如果喜欢，欢迎点赞收藏

GPU云服务器云服务器常见的数据存储方式 div对齐图片html居中对齐 html居中对齐h

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

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

常见的div居中对齐方式

摘要：前段时间面试的时候面试题里面对考察最多的就是居中对齐的问题，因此特地对居中对齐的方式做了一个简单的总结，本文的目标就是希望各位在以后根据不同的情况使用不同的居中方式，闲话少说，直接上代码布局实现父元素设置为使前段时间面试的时候面试题里面对css考察最多的就是div居中对齐的问题，因此特地对div居中对齐的方式做了一个简单的总结，本文的目标就是希望各位在以后根据不同的情况使用不同的居中...

genedna 2019-08-01 17:33 评论0 收藏0
CSS用法的一些总结

摘要：黄金档未垂直对齐同一行的一组为的使用了或者是时，如果某个的内部标签中填充一些文字等内容，可能就会出现垂直不对齐的情况。解决方法倒不难的应用会被其他一些属性破坏，例如和，所以与或是属性最好不要同用。工作上，除了Django和一些并不复杂的脚本以外，其余时间写了大量的CSS和jQuery，现在回头看之前的一些代码，写得十分丑陋又低效，其中的CSS就有很大改进空间。正如多数人的认知一样，H...

Anchorer 2019-08-28 18:10 评论0 收藏0
CSS元素垂直居中【内含vertical-align 与 line-height 属性详解】

摘要：所以文字最终可以在整个中垂直居中显示。默认值为，即把元素放在父元素的基线上。万万没想到用两行代码就实现了只要给容器加上下面两条样式，就成功垂直居中了，都是多余了的。请一定看到最后，flex太令人惊喜！ヾ(o◕∀◕)ﾉ入个门先来考虑这样一个问题：一行文字在一个固定高度的父div中怎样做到垂直居中？我们都知道设置父div的line-height 等于它的height就可以了，像下面...

frontoldman 2019-08-29 12:23 评论0 收藏0
CSS元素垂直居中【内含vertical-align 与 line-height 属性详解】

摘要：所以文字最终可以在整个中垂直居中显示。默认值为，即把元素放在父元素的基线上。万万没想到用两行代码就实现了只要给容器加上下面两条样式，就成功垂直居中了，都是多余了的。请一定看到最后，flex太令人惊喜！ヾ(o◕∀◕)ﾉ入个门先来考虑这样一个问题：一行文字在一个固定高度的父div中怎样做到垂直居中？我们都知道设置父div的line-height 等于它的height就可以了，像下面...

Sanchi 2019-08-01 16:40 评论0 收藏0
结合CSS3的布局新特征谈谈常见布局方法

摘要：案例图片来自腾讯年的一道前段笔试题，有兴趣的同学可以去看一下。腾讯前端面试稿布局布局指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。写在前面最近看到《图解CSS3》的布局部分，结合自己以前阅读过的一些布局方面的知识，这里进行一次基于CSS2、3的各种布局的方法总结。常见的页面布局在拿到设计稿时，作为一个前端人员，我们首先会做的应该是为设计图大致地划分区域，然后选择一...

xuhong 2019-08-28 18:31 评论0 收藏0