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 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用. 由此带来的变化是,这些前端应用可以独立运行.独立开发.独立 ...
最新文章
- 在vue中使用vuex,修改state的值示例
- css 网格布局_我从CSS网格布局中学到的东西
- Centos服务器时间
- linux运维、架构之路-Nginx服务
- 【地理信息系统GIS】教案(七章全)第一章:地理信息系统概述
- linux 多核线程 调度,通过轻型线程提高多核设备中的Linux实时性能
- 一些关于jvm的问题 阿里等大厂面试
- Lync 2013持久聊天迁移至Skype for Business
- lpop 原子_原子尺度表征神器STEM:同时获得原子分辨率晶体结构、成分和电子结构信息...
- 翻译: 中国北斗卫星导航系统 全球导航卫星系统 (GNSS)
- 举例说明数据库一、二、三及BCNF范式
- 面试时你需要问HR什么问题?
- 物联那点事儿之小爱同学网络控制电脑开机(arduino+点灯科技篇)
- pic单片机流水灯循环右移c语言,PIC单片机流水灯程序
- 电脑重装系统之后MySQl如何恢复
- geforce下载旧版驱动_如何在没有GeForce经验的情况下下载NVIDIA驱动程序
- MAC电脑突然开不了机的解决方案
- Quartus II FPGA指定工程文件路径
- PM2.5传感器通过树莓派推送到ThingsPanel
- 市场调研报告-全球与中国充气帆船市场现状及未来发展趋势