前言:

这一篇主要是翻译 《how-to-center-anything-with-css》这一篇文章的主要内容,再加上自己的一些概括理解;主要问题是解决垂直居中的问题。我们知道实现水平居中的方式很多种,比如:

text-align:center;
margin:0 auto;

等等都可以实现最基本的水平居中,但是对于垂直居中好像就不是很熟悉了,我们先来看看这篇译文讲的是什么,顺便穿插一些其他总结的居中方法于其中。

 

最近,我们深入探讨了CSS布局背后的核心概念,并探讨了绝对和相对定位之间的差异。 我们将使用另一个CSS布局谈话,这一次基于一个根本问题,几乎每个新的开发人员问:你如何实现居中?

有一堆不同类型的web元素和布局情况,每个都需要一个独特的解决方案来定中心(垂直和水平)。 今天,我们将讨论一系列这些场景,这样你就可以围绕他们的工作原理,带满信心去实现一切居中问题!

这个是为了什么?

我最近得到了许多挣扎于CSS的布局的基本方法和概念的设计者的评论反馈。 许多刚接触CSS的设计者普遍的共识是,他们只是拨弄代码,直到一切符合他们所需要的效果。

我自己也经历过这段时期,我知道这是你的专业成长过程中一个非常令人沮丧的时期。 知道答案是正确的在你面前,没有能够弄清楚是令人讨厌和耗时。

如果这听起来很熟悉,希望我可以帮助缓解你在这个时期有一些坚实和实用的建议,如何处理一些常见的布局场景。 如果你是一个熟练CSS甚至于可以随手闭上眼睛都可以编写适合CSS代码的高手,那么这篇文章可能不适合你。 如果你是一个设计师,只是想更好地了解如何把你的Photoshop文件中的什么,把它变成CSS,那么这篇文章很适合你。 让我们开始吧。

使一个元素水平居中

第一个场景是最常见的一个场景:

在视口或浏览器窗口中水平放置元素。 要开始,让我们突破一个简单的div,并给它一些基本的样式。

        

 方案一

我们需要做的是利用可以应用于margin 的“auto ”值。

     

缺点:

必须记在脑里的一些事情

  首先,你必须为你居中的元素声明一个特定的宽度。 高度声明不是必需的,您可以允许内容根据需要确定高度,这是默认设置,但必须始终设置宽度

重要的是要注意,虽然这个技巧将适用于大多数块级元素,而不仅仅是div,它不会帮助你实现垂直居中。

方案二

使一个绝对定位的元素居中

上面的方法可以自动将一个项目集中在另一个项目中,但是该方法假设您使用默认定位上下文:static。 如果应用了绝对定位,此方法将退出窗口。

使用我们上周学习的绝对和相对定位方法,我们可以应用一个简单的公式来解决这个问题。

    

 .container {
height: 300px;
width: 300px;
background: #eee;
margin: 10px auto;
position: relative;
} .box {
height: 100px;
width: 100px;
background: #222;
position: absolute;
left: 100px;
}

使用这段代码,我们将盒子的左边和父容器的边缘之间的距离设置为(300-100)/2=100px,实现 子元素的水平居中

缺点:

  这种方法仅在父容器具有静态宽度时有效。 必须事先声明父元素和子元素的宽度,对于流式布局,响应式宽度不起作用

方案三

  考虑到响应式设计的普及,越来越多的容器最近流行的路线。 这意味着,我们需要另一种方法来使孩子居中,而不依赖于父节点的宽度。

  为了实现这一点,我们需要使用左值的百分比。 显而易见的答案是使用50%,但是这不会真正工作,因为你不是占位元素的宽度。 为了使它工作,我们需要添加一个 负的 margin-left  的子元素的宽度的一半。

 1 .container {
2 height: 300px;
3 width: 70%;
4 background: #eee;
5 margin: 10px auto;
6 position: relative;
7 }
8
9 .box {
10 height: 100px;
11 width: 100px;
12 background: #222;
13 position: absolute;
14
15 /*Centering Method 2*/
16 margin: 0px 0 0 -50px;
17 left: 50%;
18 }

重要的是要注意,如果我们的孩子元素有流体宽度,这也将工作。 我们使用与以前相同的步骤,并提出类似以下内容:

 .container {
height: 300px;
width: 70%;
background: #eee;
margin: 10px auto;
position: relative;
} .box {
height: 100px;
width: 70%;
background: #222;
position: absolute; /*Centering Method 2*/
margin: 0px 0 0 -35%; /* Half of 70% /*
left: 50%;
}

【注:因为margin的百分比 和子元素的宽度百分比都是根据父元素的宽度来决定的】

方案四

inline-block不仅可以用来代替float,并且可以使用inline-block来实现元素的居中效果,技巧,使父元素 text-align:center;

下面的例子使得ul列表下的li居中显示

 ul {
list-style: none outside none;
padding: 10px;
background: green;
text-align: center;
}
ul li {
display: inline-block; /* 兼容IE 6,7 */
*display: inline;
zoom:; background: orange;
padding: 5px;
}

使一个元素完全居中

现在我们已经有了几个简单而复杂的居中方法,现在是时候处理元素水平和垂直的完全居中问题了

幸运的是,要解决这个问题,我们可以使用我们刚才学到的方法,我们只需要考虑高度。 这一次,我们也将垂直和水平地同时居中父元素和子元素。

方案一:

借鉴绝对定位的水平居中方法,如法炮制,我们可以利用top值实现垂直居中

.container {
height: 300px;
width: 300px;
background: #eee;
position: absolute; margin: -150px 0 0 -150px;
left: 50%;
top: 50%;
} .box {
height: 100px;
width: 100px;
background: #222;
position: absolute; /*Centering Method 2*/
margin: -50px 0 0 -50px;
left: 50%;
top: 50%;
}

方案二  利用flex布局

  1. align-items  实现垂直居中
  2. justify-content  实现水平居中
.box{
width:300px;
height:400px;
border:1px solid pink;
display:flex;
align-items:center;
justify-content:center;
}

方案三 使用transform实现

代替使用负的 margin值, 我们可以使用负的 translate() transforms属性,这种方式可以不需要事先声明子元素的宽度和高度

.container {
position:relative;
height: 200px;
width: 400px;
background: #eee;
margin: 150px auto;
}
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 40%;
height: 40%;
background:red;
}

使文字居中

对于我的下一个技巧,我会教你一些关于文本的居中方法。 我们将从容器div中的一个简单的h1元素开始

      

                   

方案一

使用 text-align 属性

 .container {
height: 400px;
width: 400px;
background: #eee;
margin: 50px auto;
} h1 {
font: 40px/1 Helvetica, sans-serif;
text-align: center;
}

容易吗? 但现在让我们说,我们要垂直居中这行文本。 如果这是一个段落,我们可能会考虑上面的方法,但由于它只有一行,我们可以使用一个漂亮的把戏。

我们所要做的就是将line-height属性设置为容器的高度。 我使用缩写字体语法完成了以下。

.container {
height: 200px; /*Set line-height to this value*/
width: 400px;
background: #eee;
margin: 150px auto;
} h1 {
font: 40px/200px Helvetica, sans-serif;
text-align: center;
}

效果图

缺点:

只对于单行文字起作用

关于文字的问题,还可以参考这篇博文 《CSS如何实现“一行水平居中,而两行就左对齐

     

如何使用CSS实现居中的更多相关文章

  1. 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码

    原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...

  2. 使用Flexbox实现CSS竖向居中

    竖向居中需要一个父元素和一个子元素合作完成. <div class="flexbox-container"> <div>Blah blah</div& ...

  3. CSS标签居中

    CSS标签居中是相对于父标签说的,即在父标签的中居中.通常是在子标签中使用margin:0 auto,来使子标签居中.此外子标签需要有固定的宽度才行,比如 子标签为div时,div的宽度默认占父标签的 ...

  4. css常用居中

    对一个已知大小的元素上下左右居中(已知大小了,直接margin也就行了): css如下:.parent{height:100px;width:100px;background:grey;positio ...

  5. CSS 图像居中对齐

    CSS  图像居中对齐 我们在<CSS 内外边距>学过内容居中,它的原理是将外边左右设置为auto.图像居中也是这个原理. 示例 <!DOCTYPE html> <htm ...

  6. css图片居中(水平居中和垂直居中)

    css图片居中(水平居中和垂直居中) css图片居中分css图片水平居中和垂直居中两种情况,有时候还需要图片同时水平垂直居中,下面分几种居中情况分别介绍. css图片水平居中 利用margin: 0 ...

  7. CSS中居中的完全指南(中英对照翻译)

    翻译自:https://css-tricks.com/centering-css-complete-guide/ Centering things in CSS is the poster child ...

  8. css左右居中的几种常见方法

    本人是前端的新人,这是第一次写技术博客,各位大大,本文有错误请指正,手中的板砖尽量轻拍,我怕疼~~ 对于水平居中和垂直居中我也用过很多方法,但是有的时候管用有的时候又嗝屁不好使了.涉及到的情况很多,所 ...

  9. 用CSS实现居中的方式

    直接放链接吧,最近大量时间放在看书上了,不想玩游戏,不想看电影,只想看书,早日做出自己的网站卖广告. CSS居中

  10. CSS布局——居中

    参考文章1.CSS布局奇淫技巧之--各种居中 2.http://www.imooc.com/article/2235 1.行内元素水平居中text-align:center对图片,按钮,文字等行内元素 ...

随机推荐

  1. D-query

    SPOJ - DQUERY 题意 求区间内出现一共有几种数字. 上次写了一个主席树,这次用一下莫队,莫队是离线询问的一种操作,将询问分块,如果在同一个块内就按照右端点排序,如果不在同一个块内就按照块的 ...

  2. poj 1177 Picture(线段树周长并)

    题目链接:http://poj.org/problem?id=1177 题意:给你n个矩形问你重叠后外边缘总共多长. 周长并与面积并很像只不过是处理的时候是   增加的周长=abs(上一次的线段的长度 ...

  3. Day003_linux基础_系统启动过程及系统安装后优化

    Linux系统启动过程: 打开电源开关开机 BIOS自检 MBR引导 grub内核菜单选择 加载内核kernel 运行init进程,系统初始化 然后读取/etc/inittab 配置文件,当前系统所在 ...

  4. SpringCloud学习笔记(3):使用Feign实现声明式服务调用

    简介 Feign是一个声明式的Web Service客户端,它简化了Web服务客户端的编写操作,相对于Ribbon+RestTemplate的方式,开发者只需通过简单的接口和注解来调用HTTP API ...

  5. SpringBoot系列__02HelloWorld探究

    在前文中,我们创建了一个简单的hello world,现在,利用这个简单的程序,来简单分析一下SpringBoot的启动过程. 如果你是使用过SSM框架的人,尤其是4.0之前的版本,相信你使用过xml ...

  6. 分布式之分布式事务、分布式锁、接口幂等性、分布式session

    一.分布式session session 是啥?浏览器有个 cookie,在一段时间内这个 cookie 都存在,然后每次发请求过来都带上一个特殊的 jsessionid cookie,就根据这个东西 ...

  7. Java 中初始化 List 集合的 7 种方式

    1.常规方式 List<String> languages = new ArrayList<>(); languages.add("Java"); lang ...

  8. linux中启动Zookeeper

    1.先把zookeeper的安装包解压在/usr/local,如下: 2.进入zookeeper目录,创建一个data目录 3.进入同级conf目录下,里面有zoo_sample.cfg,修改该文件名 ...

  9. Python网络爬虫实战(一)快速入门

    本系列从零开始阐述如何编写Python网络爬虫,以及网络爬虫中容易遇到的问题,比如具有反爬,加密的网站,还有爬虫拿不到数据,以及登录验证等问题,会伴随大量网站的爬虫实战来进行. 我们编写网络爬虫最主要 ...

  10. Redis在新项目中的使用场景

    Redis在新项目中的使用场景 数据类型 使用场景 string 比如说,我想知道什么时候封锁一个Ip地址,Incrby命令(使用这个命令记录被访问的次数) Hash 存储用户的信息[id,name, ...