发表于 分类于

公共html代码

1
2
3
4
5
<div class="parent">
    <div class="child">
        This is child
    </div>
</div>

水平居中

通用-元素宽高未知

transform absolute

1
2
3
4
5
6
7
8
.parent {
    position: relative;
}
.child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

flex

利用 flex 布局的 justify-content 属性，适用于子元素为浮动，绝对定位，内联元素，均可水平居中。

1
2
3
4
.parent {
    display: flex;
    justify-content: center;
}

内联元素

常见的内联元素有：span, a, img, input, label 等等，此方法同样适用于 display: inline-block 的元素。

1
2
3
.element {
    text-align: center;
}

块级元素

常见的块元素：div, h1~h6, table, p, ul, li 等等

设置 margin

此方法只能进行水平的居中，且对 浮动元素 或 绝对定位 元素无效。

1
2
3
4
5
6
7
8
9
.parent {
    width: 100%;
}
.child {
    width: 600px;
    height: 50px;
    margin: 0 auto;
    background: #999;
}

修改为 inline-block 属性

1
2
3
4
5
6
.parent {
    text-align: center;
}
.child {
    display: inline-block;
}

浮动元素

这里注意 relative 不能改为 absolute，因为 relative 是相对于自己原来的位置进行定位

1
2
3
4
5
6
7
.child {
    width: 100px;
    float: left;
    position: relative;
    left: 50%;
    margin-left: -50px;
}

绝对定位元素

left 负margin-left

1
2
3
4
5
6
7
8
9
.parent {
    position: relative;
}
.child {
    position: absolute;
    width: 100px;
    left: 50%;
    margin-left: -50px;
}

left right margin

1
2
3
4
5
6
7
8
9
10
.parent {
    position: relative;
}
.child {
    position: absolute;
    width: 100px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

垂直居中

通用-元素宽高未知

transform absolute

1
2
3
4
5
6
7
8
.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

flex

利用 flex 布局的 align-items 属性，适用于子元素为浮动，绝对定位，内联元素，均可垂直居中。

1
2
3
4
.parent {
    display: flex;
    align-items: center;
}

单行文本

利用 line-height = height

1
2
3
4
.text {
    line-height: 200px;
    height: 200px;
}

绝对定位元素

top 负margin-top

1
2
3
4
5
6
7
8
9
.parent {
    position: relative;
}
.child{
    position: absolute;
    top: 50%;
    height: 100px;
    margin-top: -50px;
}

top bottom margin

1
2
3
4
5
6
7
8
9
10
.parent {
    position: relative;
}
.child{
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100px;
    margin: auto 0;
}

水平+垂直居中

文本内容

1
2
3
4
5
text {
    height: 100px;
    line-height: 100px;
    text-align: center;
}

Flexbox

1
2
3
4
5
.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

absolute 负margin

灵活性差，不能自适应，宽高不支持百分比尺寸和 min-/max- 属性 ，需要知道子元素的宽高

1
2
3
4
5
6
7
8
9
10
11
12
.parent {
    position: relative;
}
.child {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

transform absolute

  1. 内容可自适应，可以封装为一个公共类，可做弹出层
  2. 可能干扰其他 transform 效果
1
2
3
4
5
6
7
8
9
.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
}

absolute margin:auto

要求居中元素的宽高必须固定

  1. 不仅可以实现在正中间，还可以在正左方，正右方
  2. 元素的宽高支持百分比 % 属性值和 min-/max- 属性
  3. 可以封装为一个公共类，可做弹出层
  4. 浏览器支持性好
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.parent{
    position: relative;
}
div {
    width: 100px;
    height: 100px;
    margin: auto;
    position: absolute;
    //fixed 也可以，适用于没有.parent
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

absolute calc

这种方式也要求居中元素的宽高必须固定，css3带来了计算属性，既然top的百分比是基于元素的左上角，那么在减去宽度的一半就好了

1
2
3
4
5
6
7
8
9
10
.parent {
    position: relative;
}
.child {
    width: 100px;
    height: 100px;
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}

table-cell

适用于子元素 display 为 inline-block, inline 类型的元素，需要已知父元素的宽高，且父元素的宽高不能设为百分比数。

1
2
3
4
5
6
7
8
9
10
11
12
.parent {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 200px;
    height: 200px;
    border: 1px solid red;
}
.child {
    display: inline-block;
    background-color: #03f;
}

grid

兼容性不如flex，不推荐使用

1
2
3
4
5
6
7
.parent {
    display: grid;
}
.child {
    align-self: center;
    justify-self: center;
}

总结

推荐

  • PC端有兼容性要求，宽高固定，推荐absolute + 负margin
  • PC端有兼容要求，宽高不固定，推荐table-cell
  • PC端无兼容性要求，推荐flex
  • 移动端推荐使用flex

比较

水平垂直居中方法 注意事项
flex 通用：不需要知道居中元素的宽高
transform + absolute 通用：不需要知道居中元素的宽高
table-cell 适用于子元素 display 为 inline-block, inline 类型的元素，需要已知父元素的宽高，且父元素的宽高不能设为百分比数。
absolute + margin：auto 要求居中元素的宽高必须固定
absolute + 负margin 需要知道子元素的宽高，宽高不支持百分比尺寸和 min-/max- 属性
absolute + calc 要求居中元素的宽高必须固定，依赖calc的兼容性
grid 兼容性不如flex

发表于 更新于 分类于

hexo 写博客

这是一般地写一篇博客的基本操作

1
2
3
4
5
6
7
E:\>cd hexo               进入 hexo 文件夹

E:\Hexo>hexo new "thenew" 新建一篇文章

E:\Hexo>hexo s -g         启动本地服务器预览

E:\Hexo>hexo d -g         上传到 https://xunzhanggzl.github.io/

hexo 的相关配置

今天更换了一下博客的主题，下面是相关的 github 链接和 这个主题配置链接

hexo-theme-next 使用文档

为文章添加标签

如下所示，添加了 Testing 和 Another Tag 两个标签，标签可以多个

1
2
3
4
title: 标签测试文章
tags:
  - Testing
  - Another Tag

为文章添加分类

分类尽量一个

1
2
title: 分类测试文章
categories: Testing

参考

hexo文档

hexo-theme-next主题配置

发表于 更新于 分类于

题目描述

只出现一次的数字

给定一个非空整数数组，除了某个元素只出现一次以外，其余每个元素均出现两次。找出那个只出现了一次的元素。

1
2
输入: [2,2,1]
输出: 1
1
2
输入: [4,1,2,1,2]
输出: 4

代码实现

根据位操作符异或可以很轻松的解决这道题

1
2
3
4
5
6
7
8
9
10
11
/**
 * @param {number[]} nums
 * @return {number}
 */
var singleNumber = function(nums) {
  let result = 0;
  for (let num of nums) {
    result ^= num;
  }
  return result;
};