CSS 中几种最常用的水平垂直居中的方法

SS 是前端里面的基础之一，也是非常重要的一部分，它往往决定了你所做出来的网页页面是否美观。在设计网页页面的过程中，总会有将元素或者文字进行水平垂直居中的要求。下面w3cschool编程狮就为大家介绍 CSS 中几种常用到的水平垂直居中的方法。

一、使用 margin:auto

当元素有给定的高度以及宽度的时候，使用 margin: auto; 元素仅会水平居中，并不会进行垂直居中。此时就需要设置元素的 position 为 absolute，父级元素的 position 为 relative，同时元素的上下左右都需要设置为 0。

HTML 代码

<div class="box">
  <div class="center1"></div>
</div>

CSS 代码

.box{
  width: 200px;
  height: 200px;
  background-color: #eee;
  position: relative;
  margin-top: 20px;
}
.center1{
  width: 50px;
  height: 50px;
  background-color: #00ACED;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

效果展示：

二、使用 position:absolute

当已经知道了要进行水平垂直居中的元素的宽高时，就可以通过设置 position: absolute 来实现。但是，使用的同时还需要结合其他属性才完整实现。因为，单是设置 absolute，上左距离均为一半，就会出现下面这种情况。很显然可以看到，元素并不是完全居中，仅只有左上角的位置在中心点

概念图：

因此想要实现元素完全水平垂直居中，在设置了 absolute 定位后，可以设置 margin 值为负，或者使用 calc 来计算，上左距离在 50% 的基础上还要减去元素本身一半的宽高。

margin 值为负或者 calc 计算均是在已知元素宽高的情况下，假设不知道元素的宽高，那么怎么实现水平垂直居中呢？这里就可以使用 transform 属性，通过坐标位移来实现居中。

CSS 代码

/* 结合 margin */
.center2{
  width: 50px;
  height: 50px;
  background-color: #7FFFD4;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -25px;
  margin-top: -25px;
}
/* 结合 calc 计算*/
.center2{
  width: 50px;
  height: 50px;
  background-color: #7FFFD4;
  position: absolute;
  left: calc(50% - 25px)
  top: calc(50% - 25px);
}
/* 结合 transform */
.center2{
width: 50px;
height: 50px;
background-color: #7FFFD4;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

效果展示

PART

三、使用弹性布局

可以通过弹性布局来设置水平垂直居中，这里需要设置父级元素 display:flex; 还需要设置两个属性，水平布局 justify-content 以及垂直布局 align-items。

HTML代码

<div class="box2">
  <div class="center4"></div>
</div>

CSS代码：

.box2{
  background-color: #eee;
  width: 200px;
  height: 200px;
  position: relative;
  margin-top: 20px ;
  display: flex;
  justify-content: center;
  align-items: center;
}
.center4{
  width: 50px;
  height: 50px;
  background-color: #B39873;
}

效果展示：

四、文本水平对齐和行高

前面介绍的是元素如何实现水平垂直居中，下面介绍的是如何将文字进行水平垂直居中。这第一个方法也是最经常用的，使用文本水平对齐 text-align 和行高 line-height 来实现的。

HTML 代码

<div class="box3">
  <div class="center5">文字居中</div>
</div>

CSS 代码

.box3{
  background-color: #eee;
  width: 200px;
  height: 200px;
  margin-top: 20px;
}
.center5{
  text-align: center;
  line-height: 200px;
}

效果展示

PART

五、使用网格布局

第二个方法可以通过网格布局 grid 来实现。而这里通过 grid 有两种方式实现，一种对元素本身属性进行设置，另一种在元素的父级元素中设置。两者看上去内容似乎差不多，不同的是在元素中设置的是 align-self 还要多了一个 margin，父级元素中是 align-items。

相关代码：

/* grid 元素中设置 */
.box4{
  background-color: #eee;
  width: 200px;
  height: 200px;
  margin-top: 20px;
  display: grid;
}
.center6{
  align-self: center;
  justify-content: center;
  margin: auto;
}
/* grid 父级元素中设置 */
.box5{
  background-color: #eee;
  width: 200px;
  height: 200px;
  margin-top: 20px;
  display: grid;
  align-items: center;
  justify-content: center;
}

效果展示：

六、总结

以上就是关于 CSS 如何将元素或者文字进行水平垂直居中的几种常用方法，大家还其他关于 CSS 实现水平垂直居中的方法吗？请在评论区留下你的想法。

关注w3cschool编程狮订阅更多IT资讯、技术干货~

言

有时候，我们想阅读页面中某段精彩的内容，但由于页面太长，用户需要自己滚动页面，查找起来非常麻烦，很容易让人失去继续往下阅读的兴趣。这样体验非常不好，所以我们可以想办法实现点击某段文字或者图片跳转到页面指定位置，方便用户的阅读。

一、纯 html 实现

1. 利用 id 为标记的锚点

这里作为锚点的标签可以是任意元素。

  <a href="#aa">跳转到 id 为 aa 标记的锚点</a>
  <p>-------------分隔线-------------</p>
  <div id="aa">a</div>

2. 利用 a 标签的 name 属性作为锚点

这里作为锚点的标签只能是 a 标签。

  <a href="#bb" >跳转到 name 为 bb 的 a 标签锚点</a>
  <p>-------------分隔线-------------</p>
  <a name="bb">name 为 bb 的 a 标签的锚点</a>
  <div id="abb">bbb</div>

注意：当以 ' a 标签 name 属性作为锚点 ' 和 ' 利用 id 为标记的锚点 ' 同时出现（即以 name 为锚点和以 id 为锚点名字相同时），会将后者作为锚点。

二、 js 实现

1. 利用 scrollTo()

window.scrollTo 滚动到文档中的某个坐标。可提供滑动效果，想具体了解 scrollTo() 可以看看 MDN 中的介绍。

话不多说，看下面代码

「html 部分」:

  <a id="linkc">平滑滚动到 c</a>
  <p>-------------分隔线-------------</p>
  <div id="cc">c</div>

「js 部分」:

  var linkc = document.querySelector('#linkc')
  var cc = document.querySelector('#cc')

  function to(toEl) {
    // toEl 为指定跳转到该位置的DOM节点
    let bridge = toEl;
    let body = document.body;
    let height = 0;
    
    // 计算该 DOM 节点到 body 顶部距离
    do {
      height += bridge.offsetTop;
      bridge = bridge.offsetParent;
    } while (bridge !== body)
    
    // 滚动到指定位置
    window.scrollTo({
      top: height,
      behavior: 'smooth'
    })
  }

  linkc.addEventListener('click', function () {
    to(cc)
  });

2. 利用 scrollIntoView()

Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。想具体了解 scrollIntoView() 可以看看 MDN 中的介绍。

下面也直接上代码

「html 部分」:

  <a onclick="goTo()">利用 scrollIntoView 跳转到 d</a>
  <p>-------------分隔线-------------</p>
  <div id="dd">ddd</div>

「js 部分」:

  var dd = document.querySelector('#dd')

  function goTo(){
    dd.scrollIntoView()
  }

注意：此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

下面为了方便看效果，把上面的代码整理在一起。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 600px;
      height: 300px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <a href="#aa">跳转到以 id 为 aa 标记的锚点 a</a>
  <p>-------------分隔线-------------</p>
  <a name="aa">hhh</a>
  <div id="aa">aa</div>
  <a href="#bb" >跳转到 name 为 bb 的 a 标签锚点</a>
  <p>-------------分隔线-------------</p>
  <a name="bb">name 为 bb 的 a 标签的锚点</a>
  <p>-------------分隔线-------------</p>
  <div>bb</div>
  <a id="linkc">平滑滚动到 c</a>
  <p>-------------分隔线-------------</p>
  <div id="cc">cc</div>
  <a onclick="goTo()">利用 scrollIntoView 跳转到 d</a>
  <p>-------------分隔线-------------</p>
  <div id="dd">dd</div>
  <p>-------------分隔线-------------</p>
  <div></div>
</body>
<script>
  var cc = document.querySelector('#cc')
  var linkc = document.querySelector('#linkc')

  function to(toEl) {
    //ele为指定跳转到该位置的DOM节点
    let bridge = toEl;
    let body = document.body;
    let height = 0;
    do {
      height += bridge.offsetTop;
      bridge = bridge.offsetParent;
    } while (bridge !== body)

    console.log(height)
    window.scrollTo({
      top: height,
      behavior: 'smooth'
    })
  }

  linkc.addEventListener('click', function () {
    to(cc)
  });

</script>
<script>
  var dd = document.querySelector('#dd')

  function goTo(){
    dd.scrollIntoView()
  }
</script>
</html>

效果图：

言

如果网页只有一种颜色，那是非常可怕的，颜色的设置丰富了网页，就如同多彩缤纷的世界。

在了解css颜色之前，我们回顾下计算机是如何显示颜色的？计算机根据色光三原色的原理通过各种算法来显示颜色。

css 颜色 —— color

网页中使用颜色关键字、16进制字符、rgb、rgba等表示红，绿，蓝三种颜色混合色，如下示例,几种写法都是指同一个颜色（红色）：

color：red;
color: #ff0000;
color: rgb(255,0,0)
color: rgba(255,0,0,1)

对于16进制形式，每2位表示一个颜色，从左到右分别是红、绿、蓝，每种颜色取值从00 到 FF。

如下示例：

color: #000000; /*黑色*/
color: #ffffff; /*白色*/
color: #ff0000; /*红色*/
color: #00ff00; /*绿色*/
color: #0000ff; /*蓝色*/

对于rgb的表示法，由三个参数组成，分别是红、绿、蓝，每种颜色取值从0 到 255。

如下示例：

color: rgb(0,0,0); /*黑色*/
color: rgb(255,255,255); /*白色*/
color: rgb(255,0,0); /*红色*/
color: rgb(0,255,0); /*绿色*/
color: rgb(0,0,255); /*蓝色*/

红，绿，蓝值从0到255的结合，给出了总额超过1600多万不同的颜色（256 × 256 ×256）。

但是现代大多数显示器能够显示至少16384种颜色。所以在使用颜色时要格外注意，避免设置不能够显示的颜色，可以参考网页安全色：https://www.w3school.com.cn/cssref/css_colors.asp。

颜色除了有三原色红绿蓝组成，还有亮度层级，如下图：

rgba 中的a是指透明度，这个是css3新增加的属性，通过rgba可以设置更加漂亮的颜色。

css 背景 —— background

通过background属性可以设置元素的背景色、背景图片，语法如下：

background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

background 在一个声明中设置所有的背景属性，可以在这里设置如下属性：

background-color —— 背景颜色。
background-image —— 使用的背景图像
background-position —— 背景图像的位置
background-size —— 背景图片的大小
background-repeat —— 如何重复背景图像
background-origin —— 背景图片的定位区域
background-clip —— 背景的绘制区域
background-attachment —— 背景图像是否固定或者随着页面的其余部分滚动。

各值之间用空格分隔，不分先后顺序。可以只有其中的某些值，例如 background：＃FF0000 url(img.png)是允许的，但至少有一个值。

建议使用background 简写属性，这样可以更好地兼容较老的浏览器，少写很多代码，当然你也可以分开使用，比如：

background-color: #ff0000;
background-image: url(img.png);
background-repeat: no-repeat;
background-size: 100% auto;

1、背景颜色 —— background-color

background-color 和之前讲的的color 一样，可以使用16进制、rgb、rgba等设置颜色。如下实例：

<html>
<head>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
p.no2 {background-color: gray; padding: 20px;}
</style>
</head>
<body>
<h1>背景色1</h1>
<h2>背景色2</h2>
<p>背景色3</p>
<p class="no2">背景色4</p>
</body>
</html>

如下图显示：

注意：background-color: transparent; 指透明色，不显示任何颜色。

2、背景图片的使用——background-image

给html元素添加背景图片，在早期网页制作中被广泛应用，如今已不建议大量使用。如下实例：

body {background-image:url(/static/bg.gif);}

这里使用了一个125*125大小的图片，如下：

但是你会发现，整个网页铺满了图片，上面的代码默认会铺满整个页面从左到右，从上到下。如果不想被平铺，可以使用background-repeat 设置。

背景图片同时可以设置多个背景图片，如下：

background-image: url(/statics/bg1.gif), url(/statics/bg2.gif);

多个图像以逗号隔开，在页面中多个图片会叠加显示，第一张图片显示在最顶端。

如下效果：

3、背景重复方式 —— background-repeat

它有如下几个属性：

repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像不重复。
inherit	从父元素继承 background-repeat 属性的设置。

实例如下：

4、背景图的位置 —— background-position

背景图片默认显示在左上角，语法如下：

background-position: x y; // x 距离左边距离，y距离顶部距离

如果要改变它的位置，可以使用关键字：top、bottom、left、right 和 center；或者使用长度值，如 100px 或 5cm；也可以使用百分数值。

x 可以取值百分比| 数值| left | center | right。

y 可以取值百分比| 数值| top| center | bottom。

当只设置一个值的时候，另一个会缺省为 center。

使用关键字，将背景图片水平居中，垂直居中：

background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;

使用百分比%：

background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 50% 50%;

50% 50% 等同于 center center，显示效果和上图一样。

还可以使用具体数值，比如 px、em、cm等。

background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 50px 50px;

显示效果如下：

5、背景图相对于容器的基准点 —— background-origin

就是设置背景图片相对于html元素什么位置作为初始坐标点，语法：

background-origin: padding-box|border-box|content-box;

几种值得含义：

padding-box	背景图像相对填充框的位置
border-box	背景图像相对边界框的位置
content-box	背景图像相对内容框的位置

如下实例：

6、背景图片大小 —— background-size

默认会显示背景图原始尺寸，可以通过此属性设置背景图片在元素上的大小，语法：

background-size: width height;

宽度和高度可以使用数值、百分比%、cover 及 contain ;

数值：可以使用任何单位的数字，比如 px、em、cm等。如果设置一个值，第二个为"auto(自动)"。

百分比%：相对于其所在html原始宽度和高度，如果设置一个值，第二个为"auto(自动)"。

cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

contain：把背景图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

如下示例：

7、背景图像是否固定或者随着页面的其余部分滚动

background-attachment 属性有以下几个值：

scroll	背景图片随页面的其余部分滚动。这是默认
fixed	背景图像是固定的
inherit	指定background-attachment的设置应该从父元素继承
local	背景图片随滚动元素滚动

如设置一个固定的背景图片，不跟随页面滚动：

background-attachment:fixed;

滚动滚动条，会发下背景图片始终固定在屏幕那个位置。

8、背景绘制区域 —— background-clip

语法如下：

background-clip: border-box|padding-box|content-box;

border-box	默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box	背景绘制在衬距方框内（剪切成衬距方框）。
content-box	背景绘制在内容方框内（剪切成内容方框）。

这个属性类似于 background-origin ，只不过它会裁剪背景图片，如下示例：

9、背景层的混合模式 —— background-blend-mode

所谓混合模式就是将图片与颜色或图片与图片进行混合，语法：

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

属性值：

示例如下：

正常模式

luminosity 亮度模式

color 颜色模式

其它模式可以自己试试，看下有什么区别。

到此，我们了解了颜色和背景的使用方法，尤其是背景的使用，由于它的属性很多，可以简写也可以分开写，要想完全掌握，还得多练习，每种属性进行组合使用看看其效果。

一般建议使用 background 简写方式，主要是可以少写很多代码。以上介绍难免有误，或不齐全，欢迎指出错误，并补充。

上篇：前端入门——css链接样式

在线咨询

上一篇：你想知道的CSS3选择器，全在这里
下一篇：20 个 JavaScript+Html+CSS 练手的小项目

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

CSS 中几种最常用的水平垂直居中的方法

一、使用 margin:auto

二、使用 position:absolute

三、使用弹性布局

四、文本水平对齐和行高

五、使用网格布局

六、总结

言

一、 纯 html 实现

1. 利用 id 为标记的锚点

2. 利用 a 标签的 name 属性作为锚点

二、 js 实现

1. 利用 scrollTo()

2. 利用 scrollIntoView()

言

css 颜色 —— color

css 背景 —— background

您的项目需求

一、纯 html 实现