几种水平垂直居中的方法

  • 前言最近刷前端面试题经常看到CSS水平垂直居中设置的标题,找了下相关办法试了下,总结了一些比较常用的。  这儿一致设置父元素和定位子元素为 .box{ width: 400px; height: 400px; background: #cae;}#content { width: 300px;height: 300px; background: #fc1;}(一)position办法 设置父元素相对定位,子元素肯定定位,使用子元素的肯定定位使子元素水平垂直居中,这种办法要知道元素的巨细; .box { width: 400px; height: 400px; background: #cae; position: relative; }#content { width: 300px;height: 300px; background: #fc1; position: absolute; top: 50px;left: 50px; }(二)position+margin办法 1.父元素相对定位,子元素肯定定位距离都设置为0,使用margin:auto;使子元素水平垂直居中. .box2 { width: 400px; height: 400px; background: #f1f; position: relative; }#content2 { width: 300px;height: 300px; margin:auto; background: #fc1; position: absolute; top: 0;left:0;bottom: 0;right: 0; }2.1.父元素相对定位,子元素肯定定位距离设置为50%(这儿50%应该是父元素巨细的50%),经过设置子元素巨细的一半的负margin值使子元素水平垂直居中. .box3{ width: 400px; height: 400px; background: #23f; position: relative; }#content3 { width: 300px;height: 300px; background: #fc1; position: absolute; top: 50%;left: 50%; margin-top: -150px; margin-left: -150px; }(三)table-cell 办法 .box4{ width: 400px; height: 400px; background: #456; display: table-cell; text-align: center; vertical-align: middle; }#content4 { width: 300px;height: 300px; background: #fc1; display: inline-block; }(四)position+transform 办法 .box5{ width: 400px; height: 400px; background: #789; position: relative; }#content5 { width: 300px;height: 300px; margin:auto; background: #fc1; position: absolute; top: 50%;left: 50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); }(五)flex 办法 1.使用弹性布局flex:设置align-items,justify-content都为center; .box6{ width: 400px; height: 400px; background: #1f1; display: flex; align-items:center; justify-content:center; }#content6 { width: 300px;height: 300px; background: #fc1; }2.弹性布局,子元素margin设置auto即可. .box7{ width: 400px; height: 400px; background: #aaf; display: flex; }#content7 { width: 300px;height: 300px; background: #fc1; margin:auto; }

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

Sublime

2 篇文章1 人订阅

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大数据钻研

CSS居中:完全指南(译)

CSS的居中是众多CSS难点的代表。为啥用CSS居中这么难呢?但是我认为这个问题其实并没有那么难啦,就是有很多种不同的方式可以达到居中的目的,这取决于不同的情景...

3247
来自专栏Bingo的深度学习杂货店

水平居中和垂直居中

本章介绍几种常见的水平居中和垂直居中的实现方式 <!DOCTYPE html> <html> <head> <title>水平居中和垂直居中</titl...

3283
来自专栏vue学习

CSS日常踩坑后的总结(猜测你也会遇到的,持续更新。。。)

可以用left:50%加上margin-left:-(宽度/2),来实现绝对定位的水平居中,这里的宽度指的是设置为绝对定位的元素的宽度

1383
来自专栏yang0range

CSS的盒子模型

一个盒子中主要的属性就5个:width、height、padding、border、margin。 width是“宽度”的意思,CSS中width指的是内容的...

1863
来自专栏黑白安全

CSS实现毛玻璃透明效果

其实毛玻璃的模糊效果技术上比较简单,只是用到了css滤镜(filter)中的blur属性。但是要做一个好的毛玻璃效果,需要注意很多细节。

1203
来自专栏cnblogs

【垂直居中高级篇】你不知道的垂直居中方式

      在Css中对元素进行水平居中是很简单的,如果他是一个行内元素,对它的父元素应用text-align:center;如果是一个块级元素,就对自身应用...

2088
来自专栏IMWeb前端团队

居中那些事情

居中那点事 最近碰到一些居中的问题需要处理,这里整理下碰到的问题以及一些解决的方案 文本水平居中 text-align:center; 可以知道,让一个元素水平...

22610
来自专栏Android干货

自定义控件详解(三):Canvas效果变换

2905
来自专栏前端知识分享

第212天:15种CSS居中的方式,最全了

CSS居中是前端工程师经常要面对的问题,也是基本技能之一。今天有时间把CSS居中的方案整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种。如有漏掉...

931
来自专栏闻道于事

JavaScript事件(二)

例题顺序: 1.子菜单下拉 2.图片轮播 3.选项卡效果 4.进度条制作 5.滑动效果 6.滚动固定效果 1.子菜单下拉 1 <!DOCTYPE html...

2666

扫码关注云+社区

领取腾讯云代金券