HTML垂直居中布局

垂直居中布局就是指当前元素在父元素容器中，垂直方向是居中显示的

实现方法：

table-cell+ vertical-align属性配合使用
absolute + transform 属性配合使用

table-cell+ vertical-align

设置display: table-cell;父元素设置为单元格

再使用vertical-align: middle;设置为垂直方向对齐方式

     .parent {width: 200px;height: 600px;background-color: antiquewhite;display: table-cell;/*display属性：table:设置当前元素为<table>元素table-cell：设置当前元素为<td>元素（单元格）*/vertical-align: middle;/*vertical-align属性：用于设置文本内容的垂直方向对齐方式top：顶部对齐middle：居中对齐bottom：底部对齐*/}.son {width: 200px;height: 200px;background-color: brown;}

  <!--定义一个父元素--><div class="parent"><!--定义一个子元素--><div class="son">居中对齐</div></div>

优点：

浏览器兼容器比较好

缺点：

vertical-align属性具有继承性，会导致父元素的文本也是居中显示的

如果父元素中包含除子元素外的内容的话，就不大适用

absolute + transform

利用移动，同HTML水平居中里的absolute + transform原理一样

  .parent {width: 200px;height: 600px;background-color: antiquewhite;position: absolute;}.son {width: 200px;height: 200px;background-color: brown;position: absolute;top: 50%;transform: translateY(-50%);}

body同上个方法

优点：

父元素是否脱离文档流，不影响子元素垂直居中效果

缺点：

transform属性是CSS3 中的新增属性，浏览器的支持情况可能会不好

HTML垂直居中布局相关推荐

CSS里总算是有了一种简单的垂直居中布局的方法了
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><me ...
bootstrap 垂直居中布局_给你一份详细的CSS布局指南，请查收
作者:catboy 文章来源:http://t.cn/A6wtKzip 在我们前端开发过程中,写css(包括sass, less, stylus这样的预处理器)进行设计稿的样式还原是一项重要的工作,而 ...
html让布局垂直居中,css垂直居中布局总结
简介总结记录一下经常需要用到垂直居中布局,欢迎补充(空手套...O(∩_∩)O) 以下栗子如果未特别标注同一使用这样的html结构垂直居中布局利用绝对定位和负margin 绝对定位可以很容易做到 ...
水平、垂直居中布局大全
文章目录水平居中布局 text-align margin + auto float + margin auto position + transform / margin flex + justif ...
bootstrap 垂直居中布局_CSS3 flex 布局必须要掌握的知识点
flex 布局已经流行好久了,从最开始大家都在用非官方标准的 box 布局(display: box; display: -webkit-box;),到后来的各种兼容写法,再到后来基本上就是只用 fl ...
CSS水平垂直居中布局方案概述
在前端开发中,通过CSS实现布局容器的居中,也有诸多方法方式,当然也是CSS面试题中的经典面试题,在本文章中会系统的分析综述通过 Flexbox 布局模块与 CSS Grid布局模实现容器的居中 ...
CSS实现垂直居中布局
垂直居中首先将<html>与<body>的高度设置为100%(为演示父元素不定宽高的效果),并清除<body>的默认样式. html,body{margin: 0 ...
bootstrap 垂直居中布局_网页布局都有哪种？一般都用什么布局？
随着Web技术不断的革新,CSS近几年也变得多年前要更强大.在Web开发中,CSS是不可或缺的一部分,对于很多Web开发者来说,有很多CSS属性不知道,或者说他们知道,但忘记在最恰当的时候使用最适合的 ...
vue垂直布局_CSS水平垂直居中布局方案概述
在前端开发中,通过CSS实现布局容器的居中,也有诸多方法方式,当然也是CSS面试题中的经典面试题,在本文章中会系统的分析综述通过 Flexbox 布局模块与 CSS Grid布局模实现容器的居中 ...

HTML垂直居中布局

HTML垂直居中布局

实现方法：

table-cell+ vertical-align

absolute + transform

HTML垂直居中布局相关推荐

最新文章

热门文章