居中“魔法”总结

作为一个前端程序员,各种居中的需求会经常遇到,比如说文本居中,水平居中,垂直居中,浮动元素居中等等。掌握一些居中的常用方法也是作为前端攻城师必不可少的技能。 因此总结了几种关于居中的实现方法,可能不是很全面,希望大家共勉,我们只需要掌握自己喜欢的几种便捷的方式,在之后开发的过程中,可以大大提高工作的效率。

该文章不涉及复杂的布局,只是单纯简洁的举例说明居中的问题,具体在项目过程中选择哪种方法主要还要根据实际情况(比如浏览器兼容性,移动端还是PC端等),若有问题欢迎指正,文章围绕以下的布局实现:

HTML部分:

<div class="contain">    <div class="center">居中部分</div></div>

1:已知居中的元素高度,可以支持图片居中

.contain{    height:100px;    width: 200px;    background-color:red;    position:relative;}.center{    height: 20px;    text-align:center;    overflow:auto;    margin: auto;    position: absolute;    top: 0; left: 0; bottom: 0; right: 0;    vertical-align:middle;}

总结:以上方法比较常用,称为绝对居中;适合对要居中的对象设置高度的情况下,未设置高度时候是失效的;

  1. 可以完美支持图片居中;
  2. 支持跨浏览器,包括IE8-IE10;
  3. 支持高度,宽度百分比%属性值和min-/max-属性;
  4. 如果没有使用box-sizing属性时,是否设置padding都可实现居中;

2:负外边距

 .center {   width: 300px;     height: 200px;     text-align: center;   position: absolute;     top: 50%; left: 50%;     margin-left: -150px;     margin-top: -100px; 
   background-color: lightblue;}

总结:该方法用于块元素尺寸已知的情况下,比较流行;主要是外边距margin取负数,大小为width/height(不使用box-sizing: border-box时包括padding)的一半,再加上top: 50%; left: 50%;)如果设置了padding值,则margin-left= (width + padding)/2 ,margin-top=(height + padding)/2 ; IE兼容性好, 但是不能自适应并且不支持百分比尺寸和min-/max-属性设置。

以下均为可变高度的方法:

3:table,table-cell

 .contain {    display:table;    height:200px;    width:200px;    background-color:red;}.center {    display:table-cell;    vertical-align:middle;    text-align:center;}

总结:该方法是比较原始的方法,内容块高度会随着实际内容的高度变化,浏览器兼容性也较好;

4:行内块元素 inline-block

.contain{  margin: 200px 100px;  position:relative;  height:150px;  width:200px;  background-color:lightgreen;  text-align:center;} .center{  display:inline-block;  vertical-align:middle;} 
.contain:after{  content: '';  display:inline-block;  height: 100%;  vertical-align:middle;  background-color:lightgreen;  }

总结:该方法比较复杂,代码量比较多,兼容性较好。关键在于边上设置高100%,宽度为0的伪元素,也可以用一个宽度为0 的行内块元素代替伪元素

5:transform

 .contain{   position:relative;   height:200px;   width:200px;   background-color:lightgreen; } .center {  position:absolute;  top:50%;  left:50%;  transform:translate(-50%, -50%); }

总结:是我比较喜欢的方法,代码量较少,也容易理解,但是不兼容IE8;

6:flex

 .contain {  display:flex;  height:200px;  width:200px;  background-color:red;  justify-content: center;  align-items: center;}

总结:该方法也比较流行,是CSS3的新属性,代码易于理解,若用于PC开发的话,它不兼容IE8/IE9,不推荐,移动端用的较多

原文发布于微信公众号 - 前端黑板报(FeHeiBanBao)

原文发表时间:2017-04-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HTML5学堂

position:absolute 的深入探讨

今天给大家说说,position:absolute 参考谁进行定位的问题。之前大家可能会认为如果absolute元素的父级(祖父)元素没有设置position属...

2946
来自专栏Python爱好者

Python绘制分形树(一)

3748
来自专栏前端说吧

JS - 可自动伸缩高度的文本框

change事件的现象是,输入框失去焦点的时候才会触发。如果文本框内容超出高度然后用户还在输入的时候,体验就会很不好。而且如果用户一直不点击别的地方让texta...

2882
来自专栏新工科课程建设探讨——以能源与动力工程专业为例

2.2 HTML5基础入门

网页就是HTML?这么理解大致准确。通常网页中包含了文字,图片、视频、小游戏,动画效果等等内容。我们以本章开头的html为例说明:

1280
来自专栏非典型技术宅

iOS屏幕适配概述1 屏幕适配简介2 Autoresizing3 Auto Layout

1763
来自专栏liulun

学习WPF——WPF布局——初识布局容器

StackPanel堆叠布局 StackPanel是简单布局方式之一,可以很方便的进行纵向布局和横向布局 StackPanel默认是纵向布局的 <Window ...

2177
来自专栏Nian糕的私人厨房

WeChat 文章列表页面(一)

本次的系列博文的知识点讲解和代码,主要是来自于 七月老师 的书籍《微信小程序开发:入门与实践》,由个人总结并编写,关于更多微信小程序开发中的各项技能,以及常见问...

1064
来自专栏新工科课程建设探讨——以能源与动力工程专业为例

2.2 HTML5基础入门

网页就是HTML?这么理解大致准确。通常网页中包含了文字,图片、视频、小游戏,动画效果等等内容。我们以本章开头的html为例说明:

1312
来自专栏Material Design组件

Material Design — 底部导航(Bottom Navigation)

4289
来自专栏达摩兵的技术空间

你不知道的height常识

本文将总结一些height中你不知道的常识内容,希望能给你的前端编码带来一些不一样的思想以及更好的理解前端盒模型。

1043

扫码关注云+社区

领取腾讯云代金券