html fixed垂直居中,前端垂直居中的几种简单实现
在前端开发尤其是web开发中会经常调整元素位置,所以经常会遇到居中问题,对于水平居中我们都知道用简单的text-align:center;就可以实现,但是对于垂直居中却并不是那么简单实现的,往往需要多条代码合作才能实现其效果。
本文简单介绍几种垂直居中的方式,技术不高,水平有限,仅供参考。
1. 不知道自己高度和父元素高度时,只要�使用绝对定位就可以实现
以下代码没有插图的都是实现的效果相同,如图所示:
image.png
当一个父元素没有明确限制高度,而只是靠着内部元素的高度撑起来其高度时,我们又要在该父元素中设置一个居中的框框就可以采取这种方式:
// html代码
enter
enter
enter
enter
enter
enter
enter
enter
enter
enter
//css代码
.parent-element-absolute {
width: 800px;
text-align: left;
background-color: white;
position: relative;
}
.child-element-absolute {
width: 450px;
height: 100px;
background-color: gray;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
2. 在父元素下只有一个元素,且父元素设置了高度,则只需要使用相对定位即可
该必须条件为该父元素下只有一个子元素。其html代码与上类似。
// css
.parent-element-relative {
width: 800px;
height: 250px;
text-align: left;
background-color: white;
position: relative;
}
.child-element-relative {
width: 450px;
height: 100px;
background-color: gray;
position: relative;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
3. flex布局设置垂直居中
.parent-element-flex {
width: 800px;
height: 250px;
background-color: white;
display: flex;
display: -webkit-flex;
align-items: center;
}
.child-element-flex {
width: 450px;
height: 100px;
background-color: gray;
margin: 0 auto;
}
4. table-cell设置垂直居中
.parent-element-table-cell {
width: 800px;
height: 250px;
background-color: white;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.child-element-table-cell {
width: 450px;
height: 100px;
background-color: gray;
margin: 0 auto;
}
5. -webkit-box属性设置垂直居中
.parent-element-webkit-box{
width: 800px;
height: 250px;
background-color: white;
display: -webkit-box;
-webkit-webkit-box-pack: enter;
-moz-webkit-box-pack: enter;
-ms-webkit-box-pack: enter;
-o-webkit-box-pack: enter;
-khtml-webkit-box-pack: enter;
webkit-box-pack: enter;
-webkit-box-align: center;
}
.child-element-webkit-box{
width: 450px;
height: 100px;
background-color: gray;
margin:0 auto;
}
6. line-height实现文字居中
//html
andy
//css
.parent-element-line-height {
width: 800px;
height: 250px;
background-color: white;
line-height: 250px;
text-align: center;
vertical-align: middle;
}
7. fixed设置窗口整体居中
.parent-element-fixed{
width: 600px;
height: 250px;
background-color: lightgrey;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
line-height: 250px;
vertical-align: middle;
}
html fixed垂直居中,前端垂直居中的几种简单实现相关推荐
- CSS里总算是有了一种简单的垂直居中布局的方法了
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><me ...
- css垂直居中最常用的八种布局方法
css垂直居中最常用的八种布局方法 首先定义两个盒子,然后进行下布局样式操作! 利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center 块级元素设置其本身的l ...
- 高度不定垂直居中_CSS垂直居中的七个方法
我们在编辑一个版面,通常都会用到水平居中和垂直居中来设计,而水平居中很好处理,不外乎就是设定margin:0 auto:或是text-align:center:,就可以轻松解决掉水平居中的问题,但一直 ...
- css 垂直居中_CSS垂直居中的另类实现
前言 众所周知,"css如何实现元素垂直居中?"已经是一个老生常谈的问题了,这个问题目前已经有了许多解决方案,这些方案也都有各自适用的场景以及优缺点,大致如下: flex布局 gr ...
- html隐藏元素的方式,Web前端:CSS3——3种隐藏元素方法的区别
原标题:Web前端:CSS3--3种隐藏元素方法的区别 Web前端教程 CSS3规范的一个新特点是被分为若干个相互独立的模块.一方面分成若干较小的模块较利于规范及时更新和发布,及时调整模块的内容,这些 ...
- c语言实现路由功能,前端路由的两种实现方式,内附详细代码
一.前端路由介绍 前端路由主要应用在SPA(单页面开发)项目中.在无刷新的情况下,根据不同的URL来显示不同的组件或者内容. 前端路由的实现原理 : hash值 + onhashchange事件 hi ...
- 前端常用60余种工具方法(下)
前端常用60余种工具方法(上) 41.将数字转换为大写金额 export const changeToChinese = (Num) => {//判断如果传递进来的不是字符的话转换为字符if ( ...
- 前端常用60余种工具方法(上)
1.邮箱 export const isEmail = (s) => {return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2, ...
- 实施微前端的六七种方式
微前端架构是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用. 由此带来的变化是,这些前端应用可以独立运行.独立开发.独立 ...
最新文章
- 13.组合查询--SQL
- Mac OS X Yosemite安装盘U盘制作
- tomcat8.0.15+spring4.1.2的集群下共享WebSocketSession?
- 外伤导致色觉异常型复视(球后视神经炎+视神经萎缩)
- Opencv FFmpeg Ubuntu下编译问题
- c ++产生不同的随机数_C ++程序生成随机密码
- loj2537 「PKUWC2018」Minimax 【概率 + 线段树合并】
- 为LogAnalyzer添加源IP
- 谈谈C#中的事件注册和注销
- Hibernate缓存研究
- 在线Latex公式编辑器
- R 语言详细安装教程(保姆级)及 RStudio简易安装教程
- imp 导入dmp文件。
- 关于N卡录制双音轨问题以及PR2020 注册机
- python中返回上一步操作_返回上一步的快捷键-百度经验
- 吉几三的俺ら东京さ行ぐだ歌词
- linux进程间的通信实验,linux实验进程之间的通信.doc
- 谷歌浏览器为什么推荐使用搜狗搜索?知乎网友的脑回路真是……
- 基于matlab的铣床运动,利用Matlab/Simulink仿真数控机床的动态轨迹误差
- c语言中除法怎么取模,c语言如何取模运算