vue垂直布局_前端页面布局中水平、垂直居中问题

前言

两年前工作时开的博客，一年前写了两篇博文，然后就到了现在才重拾起笔。原因有二，一是自觉技术不足，二曰懒。

最近由于在项目中遇到需求为拖动列可调整列顺序的表格，最后找到一款基于JQuery名为DataTables的插件，但网上为之写使用方法的很少，质量也很差，所以就动了为之写一个较为全面的使用方法的文章，又由于最近项目工作繁忙，所以一周过去了还没有写，今天抽空写了这篇文章，至于那个插件则以后抽时间写。

这篇文章里的方法不多，但都是些常用的，足够解决问题了。

正文

水平垂直居中

1.给元素定位使之居中(利用定位和transform平移的那种方法就不需要写了)

为居中元素的父级添加以下样式：

原因：为元素设置absolute定位时需要为父级设置非static定位

position: relative;

为居中元素添加以下样式：

注意：不给居中元素设置宽高的话，该元素会与设置非static定位的父级(没有的话会是html元素)同宽高。

width: 40px;height: 40px;position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;

我们可利用上面的定位方式让一个元素与浏览器页面显示区域同宽高，具体方法如下：

设置html元素宽高：

width: 100%;

height: 100%;

设置该元素样式如下(该元素与html元素之间的元素不要设置非static定位)：

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

2.设置弹性布局使子元素居中两种方式

方式一:为居中元素父级设置以下样式：

width: 400px;

height: 400px;

display: flex;

为居中元素添加以下样式：

margin: auto;

方式二:为居中元素父级设置以下样式：

display: flex;

align-items: center;

justify-content: center;

垂直居中

利用行高居中

为居中元素父级设置以下样式：

此方法可为元素内文字和行元素设置垂直居中

line-height: 50px;

水平居中

1.利用margin实现居中

为居中元素添加以下样式：

必须为居中元素设置宽

width: 200px;

margin: auto;

2.利用text-align样式居中

为居中元素父级添加以下样式：

此方法可为元素内文字和行元素设置垂直居中

text-align: center;

vue垂直布局_前端页面布局中水平、垂直居中问题相关推荐

sessionstorage ie8下跨页面_前端页面布局困难？教你用盒子模型一招解决
CSS 盒子模型 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个 ...
css图片在盒子里居中,让图片在div盒子中水平垂直居中
//调整多张图片,让图片水平垂直居中 function adjustImg(){ let imgDiv = document.getElementsByClassName("img" ...
子盒子在父盒子中水平垂直居中
子盒子在父盒子中水平垂直居中的几种实现方式. 方式一:margin; HTML:  <div class="father"&g ...
vue设置右边距_利用页面布局设置制作工资条（不用函数）
利用页面布局设置制作工资条(不用函数) 彭怀文第一节和第二节分别讲了使用函数或排序的办法,将工资表转化工资条,但是美中不足的是标题行只能是单标题行,对于多标题行或者含有合并单元格的标题行却没有办法解 ...
flex 左右布局_移动端开发常用布局：前端弹性布局总结
各位已经入坑的前端小伙伴,前面咱们已经给大家分享了移动端开发时候流式布局的应用场景及注意事项,今天再次给大家分享一个布局叫弹性布局,接下来咱们从如下几个方面,全方位的给大家介绍弹性布局的使用. 一:什 ...
2.18 前端页面布局方式的演变
第一阶段现在已经很少有人提及,其实最早的页面布局是使用table布局的,那时候的网页设计师基本不会担心跑位的问题,但是随着网页的功能越来越复杂,CSS的表现力越来越强,对HTML文档的语义化要求和页 ...
sketch浮动布局_使用智能布局和调整大小在Sketch中创建更好的可重用符号
sketch浮动布局 Sketch is a widely used tool for UI designs. It implemented the Sketch是用于UI设计的广泛使用的工具. 它实 ...
vue项目打包后出现页面布局异常、图片显示不出来等问题
通常我们写完vue项目后,会执行 npm run serve 对项目进行打包.执行完后,就在项目的目录中生成dist文件夹.一开始,我以为双击dist文件夹里index.html会把打包后的项目运行起 ...
bootstrap怎么在移动端横向布局_前端知道分享，移动端布局
一.下面我将简单的介绍移动端布局的八种方式: 1.固定布局 2.流动布局 3.浮动布局 4.定位布局 5.混合布局 6.flex布局 7.rem布局 8.响应式布局 9.**圣杯布局10.**双飞翼 ...

vue垂直布局_前端页面布局中水平、垂直居中问题

vue垂直布局_前端页面布局中水平、垂直居中问题相关推荐

最新文章

热门文章