欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 >

行使CSS完成元素居中的七种要领

发布时间:2016-11-24  编辑:杨雨个人博客网站   点击:   

在网页上使 HTML 元素居中看似一件很简朴的工作. 至少在某些环境下是这样的,可是伟大的机关每每使一些办理方案不能很好的施展浸染。

在网页机关中元素程度居中比元素垂直居中要简朴不少,同时实现程度居中和垂直居中每每是最难的。此刻是相应式计划的期间,我们很难确切的知道元素的精确高度和宽度,以是一些方案不大合用。据我所知, 在CSS中至少有六种实现居中的要领。我将行使下面的HTML布局从简朴到伟大开始讲授:

<div class="center">
  <img src="jimmy-choo-shoe.jpg" alt>
</div>

鞋子图片会改变,可是他们城市保持500pxX500px的巨细。 HSL colors 用于使配景颜色保持同等。

行使text-align程度居中

Photograph of a classic Chuck Converse shoe

偶然显而易见的方案是最佳的选择:

div.center {
  text-align: center;
  background: hsl(0, 100%, 97%);
}
div.center img {
  width: 33%; height: auto;
}

这种方案没有使图片垂直居中:你必要给<div> 添加 padding 可能给内容添加 margin-top 和 margin-bottom使容器与内容之间有必然的间隔。

行使 margin: auto 居中

Photograph of a white classic Nike sneaker

这种方法实现程度居中和上面行使text-align的要领有沟通范围性。

div.center {
  background: hsl(60, 100%, 97%);
}
div.center img {
  display: block;
  width: 33%;
  height: auto;
  margin: 0 auto;
}

留意: 必需行使display: block使 margin: 0 auto对img元素见效。

行使table-cell居中

Photograph of black Oxford calfskin shoe designed by Vivienne Westwood

行使 display: table-cell, 而不是行使table标签; 可以实现程度居中和垂直居中,可是这种要领必要添加特另外元素作为外部容器。

<div class="center-aligned">
    <div class="center-core">
        <img src="jimmy-choo-shoe.jpg">
    </div>
</div>

CSS:

.center-aligned {
    display: table;
    background: hsl(120, 100%, 97%);
    width: 100%;
}
.center-core {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.center-core img {
    width: 33%;
    height: auto;
}

留意:为了使div 不折叠必需加上 width: 100%,外部容器元素也必要加上必然高度使得内容垂直居中。给Html和body配置高度后,也可以使元素在body垂直居中。此要领在IE8+赏识器上见效。

行使absolute定位居中

Photograph of an Under Armour Micro G Toxic Six shoe

这种 方案 有很是好的跨赏识器支持。有一个弱点就是必需显式声明外部容器元素的height:


.absolute-aligned {
    position: relative;
    min-height: 500px;
    background: hsl(200, 100%, 97%);
}
.absolute-aligned img {
    width: 50%;
    min-width: 200px;
    height: auto;
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0; left: 0;
    bottom: 0; right: 0;
}

Stephen在他的 博客 中演示了这种方案的几种变革。

行使translate居中

Photograph of a Jimmy Choo shoe

Chris Coiyer 提出了一个行使 CSS transforms 的新方案。 同样支持程度居中和垂直居中:


.center {
    background: hsl(180, 100%, 97%);
    position: relative;
    min-height: 500px;
}
.center img {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 30%; height: auto;
}

可是有以下几种弱点:

  • CSS transform 在部门就赏识器上必要行使 前缀
  • 不支持 IE9 以下的赏识器。
  • 外部容器必要配置height (可能用其他方法配置),由于不能获取 绝对定位 的内容的高度。
  • 假如内容包括笔墨,此刻的赏识器合成技能会使笔墨恍惚不清。

行使Flexbox居中

Photograph of a Manolo Blahnik shoe

当新旧语法差别和赏识器前缀消散时,这种要了解成为主流的居中方案。

.center { 
    background: hsl(240, 100%, 97%);
    display: flex;
    justify-content: center;
    align-items: center;
}
.center img { 
    width: 30%; height: auto;
}

在许多方面 flexbox 是一种简朴的方案, 可是它有新旧两种语法以赶早期版本的IE缺乏支持 (尽量可以行使 display: table-cell作为降级方案)。

此刻类型已经最终确定,当代赏识器也多半支持,我写了一篇具体的教程 教程

行使calc居中

Photograph of a Christian Louboutin shoe

在某些环境下比flexbox更全面:

.center {
    background: hsl(300, 100%, 97%);
    min-height: 600px;
    position: relative;
}
.center img {
    width: 40%;
    height: auto;
    position: absolute;
    top: calc(50% - 20%);
    left: calc(50% - 20%);
}

很简朴,calc 应承你基于当前的页面机关计较尺寸。在上面的简朴计较中, 50% 是容器元素的中心点,可是假如只配置50%会使图片的左上角对齐div的中心位置。 我们必要把图片向左和向上各移动图片宽高的一半。计较公式为:

top: calc(50% - (40% / 2));
left: calc(50% - (40% / 2));

在此刻的赏识个中你会发明,这种要领更合用于当内容的宽高为牢靠尺寸:

.center img {
    width: 500px; height: 500px;
    position: absolute;
    top: calc(50% - (300px / 2));
    left: calc(50% - (300px – 2)); 
}

我在 这篇文章 中具体讲授了calc。

这种方案和flex一样有很多沟通的弱点: 固然在当代赏识器中有精采的支持,可是在较早的版本中如故必要赏识器前缀,而且不支持IE8。

.center img {
    width: 40%; height: auto;
    position: absolute;
    top: calc(50% - 20%);
    left: calc(50% - 20%);
}

虽然尚有 其他更多的方案。领略这六种方案之后,web开拓职员在面临元素居中的时辰会有更多的选择。

本文地址:http://itbyc.com/web/13201.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1