文档章节

常见的垂直居中布局方式

ali安东尼
 ali安东尼
发布于 2017/08/28 15:24
字数 281
阅读 3
收藏 0

1. display:table-cell与vertical-align: middle       无论元素是行内元素,还是块元素,均可以通过设置display:table-cell;和vertical-align: middle,则可实现元素居中。若元素是行内元素,那么就在其自身里面设置这两个特性;若元素是块元素,那么就在其父元素里面设置。

2. flex弹性布局         上一篇介绍怎么使用flex实现元素的水平居中布局,类似地,也可以使用flex实现垂直居中布局。设置如下:        <pre>     .son{          display: flex;            align-items:Center;     }     </pre>  

    如果需要同时实现水平以及垂直的居中,则在样式里面同时设置justify-content:center;和align-items:Center;。

    除了以上的方法,还可以通过flex与margin的结合实现,具体设置如下:     <pre>     .parent{         display: flex;         text-align: center;         height:100px;         background:red;     }

    .parent span{         margin:auto;     }     </pre>

3. 绝对定位position         使用绝对定位的方式也能实现垂直居中,设置如下:        <pre>     div{         width: 50%;          height: 50%;          background: red;         margin: auto;          position: absolute;          top: 0;         left: 0;         bottom: 0;         right: 0;  

由睿江云人员提供,想了解更多,请登陆www.eflycloud.com

© 著作权归作者所有

ali安东尼
粉丝 3
博文 192
码字总数 173101
作品 0
广州
私信 提问
由 Bootstrap 的媒体对象(Media object) 谈 flexbox

CSS3 弹性盒子(flexbox),是一种新的布局方式。使用 flexbox,可以很方便的实现常见的布局以及居中效果。Bootstrap v4 的 Media object 也是使用 flexbox 来实现。flexbox 相关的属性较多,本...

2017/12/18
0
0
探秘 flex 上下文中神奇的自动 margin

为了引出本文的主题,先看看这个问题,最快水平垂直居中一个元素的方法是什么? 水平垂直居中也算是 CSS 领域最为常见的一个问题了,不同场景下的方法也各不相同,各有优劣。嗯,下面这种应该...

chokcoco
05/23
0
0
垂直居中实现方式总结

在网页制作过程中,我们经常要用到图片、文字的垂直居中。今天总结一下垂直居中的方法。 方法一 利用 实现垂直居中 这种方法适用于单行文本垂直居中,如果文本内容太长,出现了换行,换行后的...

呵呵闯
2016/12/05
25
0
如何让div中的内容垂直居中

虽然Div布局已经基本上取代了表格布局,但表格布局和Div布局仍然各有千秋,互有长处。比如表格布局中的垂直居中就是Div布局的一大弱项,不过好在千变万化的CSS可以灵活运用,可以制作出准垂直...

文文1
2015/09/21
25.8K
0
[译文]CSS的水平/垂直居中:一篇完整的指南

原文:Centering in CSS: A Complete Guide 在CSS中居中是(开发者)抱怨CSS设计的代表问题之一。有人嘲笑说:这有什么困难的呢?我认为,难度不在于解决问题,而在于有如此多的不同解决方法...

huangpin815
2017/09/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

作为一个(IT)程序员!聊天没有话题?试试这十二种技巧

首先呢?我是一名程序员,经常性和同事没话题。 因为每天都会有自己的任务要做,程序员对于其他行业来说;是相对来说比较忙的。你会经常看到程序员在发呆、调试密密麻麻代码、红色报错发呆;...

小英子wep
55分钟前
10
0
【SpringBoot】产生背景及简介

一、SpringBoot介绍 Spring Boot 是由 Pivotal 团队提供的全新框架,其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程,该框架使用了特定的方式来进行配置,从而使开发人员不再需要...

zw965
今天
4
0
简述并发编程分为三个核心问题:分工、同步、互斥。

总的来说,并发编程可以总结为三个核心问题:分工、同步、互斥。 所谓分工指的是如何高效地拆解任务并分配给线程,而同步指的是线程之间如何协作,互斥则是保证同一时刻只允许一个线程访问共...

dust8080
今天
6
0
OSChina 周四乱弹 —— 当你简历注水但还是找到了工作

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @花间小酌 :#今日歌曲推荐# 分享成龙的单曲《男儿当自强》。 《男儿当自强》- 成龙 手机党少年们想听歌,请使劲儿戳(这里) @hxg2016 :刚在...

小小编辑
今天
3.2K
22
靠写代码赚钱的一些门路

作者 @mezod 译者 @josephchang10 如今,通过自己的代码去赚钱变得越来越简单,不过对很多人来说依然还是很难,因为他们不知道有哪些门路。 今天给大家分享一个精彩的 GitHub 库,这个库整理...

高级农民工
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部