8种css居中实现的详细实现方式了
这是一篇关于居中对齐方式的总结
开篇之前,先问一下大家都知道几种居中的实现方式?
面试时答出来两三个就不错了,就怕面试官还让你继续说。今天就来总结一下这些居中的方式
- 使用flex布局设置居中。
- 使用flex 时也能通过给子项设置margin: auto实现居中。
- 使用绝对定位的方式实现水平垂直居中。
- 使用grid设置居中。
- 使用grid时还能通过给子项设置margin: auto实现居中。
- 使用tabel-cell实现垂直居中。
- 还有一种不常用的方法实现垂直居中。
- 最后还有一种奇葩的方法。容器设置position: relative。孩子设置 top、left、bottom、right都设置为0
1.flex布局设置居中
常见的一种方式就是使用flex
布局设置居中。
利用弹性布局(flex
),实现水平居中,其中justify-content
用于设置弹性盒子元素在主轴(横轴)方向上的对齐方式
给容器设置:
display: flex;
写在父元素上这就是定义了一个伸缩容器justify-content
主轴对齐方式,默认是横轴align-items
纵轴对齐方式,默认是纵轴
优点: 简单、方便、快速,三行代码搞定。
<div class="box"><div class="child">水平垂直居中</div>
</div><style>
.box {width: 200px;height: 200px;border: 1px solid;display: flex;align-items: center; // 纵轴对齐方式,默认是纵轴 子元素垂直居中justify-content: center; //纵轴对齐方式,默认是纵轴
}
.child {background: red;
}
</style>
代码片段
2.flex-给子项设置
第一种方式是给父盒子设置属性,这一种是给子盒子设置margin: auto
实现居中。给容器设置 display: flex;
子项设置 margin: auto;
<div class="box"><div class="child">水平垂直居中</div>
</div><style>
.box {width: 200px;height: 200px;border: 1px solid;display: flex;
}
.child {background: red;margin: auto; // 水平垂直居中
}
</style>
代码片段
3.绝对定位
使用绝对定位的方式实现水平垂直居中。容器设置position: relative
。子元素设置 position: absolute
; left: 50%
; top: 50%
; transfrom: translate(-50%, -50%)
;
优点就是不用关心子元素的长和宽,但是这种方法兼容性依赖translate2d的兼容性
<div class="box"><div class="child">水平垂直居中</div>
</div><style>
.box {width: 200px;height: 200px;border: 1px solid;position: relative;
}
.child {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);background: red;
}
</style>
代码片段
4.tabel-cell实现垂直居中
css新增的table属性,可以让我们把普通元素,变为table元素的现实效果,通过这个特性也可以实现水平垂直居中
而且tabel单元格中的内容天然就是垂直居中的,只要添加一个水平居中属性就好了
使用tabel-cell实现垂直居中,容器设置
display: table-cell;
;vertical-align: middle
属性设置元素的垂直对齐方式子元素如果是块级元素,直接使用左右
margin:auto
实现水平居中。如果是行内元素,给容器设置text-align: center
利用 text-align: center
可以实现在块级元素内部的内联元素水平居中。此方法对内联元素inline
, 内联块inline-block
, 内联表inline-table
, inline-flex
元素水平居中都有效。
<div class="box"><div class="child">水平垂直居中</div>
</div><style>
.box {width: 200px;height: 200px;border: 1px solid;display: table-cell;vertical-align: middle; // 设置元素在垂直方向上的对齐方式text-align: center;
}
.child {background: red;display: inline-block;
}
</style>
代码片段
5.grid设置居中
- 使用grid设置居中。给容器设置
display: grid;
align-items: center;
justify-content: center;
通过给容器设置属性,达到居中效果,但是这种方式兼容性较差,不推荐。
<div class="box"><div class="child">水平垂直居中</div>
</div><style>
.box {width: 200px;height: 200px;border: 1px solid;display: grid;align-items: center;justify-content: center;
}
.child {background: red;
}
</style>
代码片段
6.grid给子项设置
使用grid时还能通过给子项设置margin: auto;
实现居中。给容器设置 display: grid;
子项设置 margin: auto;
某些浏览器会不支持grid布局方式,兼容性较差,不推荐。
<div class="box"><div class="child">水平垂直居中</div>
</div><style>
.box {width: 200px;height: 200px;border: 1px solid;display: grid;
}
.child {background: red;margin: auto;
}
</style>
代码片段
7.给容器加给伪元素
这是一种不常用的方法实现垂直居中。给容器加给伪元素,设置line-height
等于容器的高度。给孩子设置display: inline-block
;
<div class="box"><div class="child">水平垂直居中</div>
</div><style>
.box {width: 200px;height: 200px;border: 1px solid;text-align: center;
}
.box::after {content: "";line-height: 200px;
}
.child {display: inline-block;background: red;
}</style>
代码片段
8.还有一种奇葩的方法
这个奇葩方式和第三种使用绝对定位相似,只不过需要给子元素设置 position: absolute
; 设置固定宽度和高度;top、left、bottom、right
都设置为0; margin设置为auto;也能实现垂直水平居中。
<div class="box"><div class="child">水平垂直居中</div>
</div><style>
.box {width: 200px;height: 200px;border: 1px solid;position: relative;
}
.child {background: red;width: 100px;height: 40px;position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;
}
</style>
代码片段
以上就是一些我们常用的垂直居中的方案。
8种css居中实现的详细实现方式了相关推荐
- 15种CSS居中的方式
简言 CSS居中是前端工程师经常要面对的问题,也是基本技能之一.今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种.如有漏掉的,还会陆续的补充进来,算做是 ...
- 【基础】这15种CSS居中的方式,你都用过哪几种?
简言 CSS居中是前端工程师经常要面对的问题,也是基本技能之一.今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种.如有漏掉的,还会陆续的补充进来,算做是 ...
- CSS居中方式(一)
文章目录 CSS居中方式 一.水平居中 a. 内联元素水平居中 b. 块级元素水平居中 c. 多块级元素水平居中 使用inline-block 使用display:flex 二.垂直居中 a. 单行内 ...
- css居中最佳方案,CSS 水平、垂直居中的5种最佳方案
CSS 居中对齐 代码中均省略了浏览器前缀 以下例子以我的个人的标准排序 当然也有更多的居中处理方法 但我觉得只有这5种方法是最完善的解决方案 flex 居中 优点:可对未知高度进行居中处理 .wra ...
- css样式高居中,CSS居中的几种方式
本文主要总结几种常见的CSS居中方式,下面我准备分为三个方向来写,分别是水平居中,垂直居中,水平垂直居中. 水平居中 1.inline元素如何实现水平居中?(text-align:center) 2. ...
- web前端-01:关于css居中的几种方法
web前端-01:关于css居中的几种方法 在学习web前端的过程中,居中问题应该算得上是个比较经典的问题了吧,关于居中的方法也有很多,总结一下我自己比较喜欢用的几个方法. 1 利用 ...
- 设置图片元素上下垂直居中的7种css样式_赵一鸣博客
设置图片元素上下垂直居中的7种css样式 阅读(9548) @2018-07-15 14:13:34 图片.文字左右居中很简单,只需要以下代码: 1 text-align:center; 文字上下居中 ...
- div为空的时候 浮动没有效果_3种CSS清除浮动的方法
点击上方 "前端技术精选" 关注,星标或者置顶 12点00分准时推送,第一时间送达 作者:html中文网 | 编辑:前端妹 来源:html.cn/web/css/19613.htm ...
- css 滤境的详细介绍
导读: [alpha滤镜属性]这个名字,在flash和photoshop经常见到.它们的作用基本类似,就是把一个目标元素与背景混合.你可以指定数值来控制混合的程取u庵帧坝氡尘盎旌稀蓖ㄋ椎厮稻褪且桓鲈 ...
最新文章
- .md 文件的格式:写出好看的笔记
- 进程间的通信方式(二):管道Pipe和命令管道FIFO
- ASP.NET 2.0中实现模板中的数据绑定
- 在Visual C++中用ADO进行数据库编程(下)
- 【java】JMH微基准测试,报错Unable to find the resource: /META-INF/BenchmarkList
- 小试ImageMagik——开发篇
- Umbraco中的Examine Search功能讲解
- asp.net服务器控件开发-学习之路(一)
- iframe src 不加载页面_iframe和frame的区别是什么?iframe和frame的区别总结
- 中国移动苏州研发中心前端笔试(1)
- Hibernate 检索策略的学习
- 网络延迟的优化方法-管理延迟
- 库卡c2机器人编程语言,有一篇文章知道库卡-C2机器人的内部结构
- Excel:如何批量将文本数字转为数值型数据
- labview文件写入与读取
- JavaScript实现队列结构
- cnsl是什么意思_CNSL是什么意思
- ios11修改微信步数_iOS逆向之“修改微信运动步数”
- 中科曙光 量子计算机,中科曙光 量子计算机 量子计算机的曙光
- 深度学习——神经网络中的activation