简体中文|
翻译|杨晓爱
在后端开发工程师的日常生活中，使用CSS居中元素是很常见的，这也是笔试中经常问到的问题。
您已经使用 flex 或 absolute+transform 实现了它，但您知道至少 10 种将元素居中的方法吗？为此，在昨天的文章中，我整理了 10 个 CSS 方法供大家实现元素居中，希望能帮助大家提升 CSS 技能。
1、绝对+（-边距）
如果元素的长度和高度已知，我们可以使用至少 3 种方法来使元素居中。例如，在右图中，兔子的长度和高度分别为“500px”和“366px”。我们应该如何居中？
使用“绝对+（-margin）”很容易做到！代码如下：
.HTML
平移结
.CSS
.container {width: 800px;height: 600px;border: solid 1px #e3c1a9;border-radius: 30px;/* Key css */position: relative;}.cat{width: 500px;height: 366px;border-radius: 50%;position: absolute;/* Key css */left: 50%;top: 50%;/* half the width */margin-left: -250px;/* half the height */margin-top: -183px;}
这些方法简单易懂，兼容性好，缺点是我们需要知道子元素的宽度和高度。
演示地址：
2、绝对+保证金自动
我们还可以通过将所有方向的距离设置为 0 并将行距设置为手动来居中兔子。
CSS 代码如下：
.container {width: 800px;height: 600px;border: solid 1px #e3c1a9;border-radius: 30px;position: relative;}.cat{width: 500px;height: 366px;border-radius: 50%;/* Key css */position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;}
与第一种方法一样，它也非常兼容，但缺点是您需要知道子元素的宽度和高度。
演示地址：
3、绝对+计算
CSS3 带来了 calc 估计属性，它允许我们将元素与它居中，如下所示：
.container {width: 800px;height: 600px;border: solid 1px #e3c1a9;border-radius: 30px;position: relative;}.cat{width: 500px;height: 366px;border-radius: 50%;position: absolute;/* Key css */top: calc(50% - 183px);left: calc(50% - 250px);}
这些技巧的兼容性取决于计算的兼容性，缺点是需要知道子元素的宽度和高度。
演示地址：
4、柔性
以上三种方式必须事先知道元素的宽度和高度，但元素的宽度和高度是不确定的。所以有柔性，特别适合这个。
网页代码：
hello mediumCSS代码：
.container {width: 400px;height: 200px;border: solid 1px #e3c1a9;border-radius: 30px;/* Key css */display: flex;align-items: center;justify-content: center;}.content{padding: 20px;border-radius: 10px;background-color: #e3c1a9;color: #ffffff;}
我们可以用很少的代码将元素居中，这真的很酷，这是我最喜欢的使用方式。
演示地址：
5、网格
与 Flex 一样，网格可以很容易地用于将元素居中。
CSS代码：
.container {width: 400px;height: 200px;border: solid 1px #e3c1a9;border-radius: 30px;/* Key css */display: grid;}.content{/* Key css */align-self: center;justify-self: center;padding: 20px;border-radius: 10px;background-color: #e3c1a9;color: #ffffff;}
演示地址：
6、绝对+变换
使用变换，我们还可以在事先不知道元素长度和高度的情况下居中元素。
CSS代码：
.container {width: 400px;height: 200px;border: solid 1px #e3c1a9;border-radius: 30px;/* Key css */position: relative;}.content{/* Key css */position: absolute;left: 50%;top: 50%;/* Key css */transform: translate(-50%, -50%);padding: 20px;border-radius: 10px;background-color: #e3c1a9;color: #ffffff;}
演示地址：
7、文本对齐+行高+垂直对齐
以上 6 种方法相对容易理解，在我们的工作中经常使用，虽然这 4 种方法使用频率较低，但也值得学习。
首先css表格居中，我们可以将 span 的 “display” 属性设置为 “inline-block”。然后，通过将容器的文本对齐属性设置为居中，可以将 span 元素水平居中。组合线高和其他属性以使其垂直居中。
CSS代码：
.container {width: 400px;height: 200px;border: solid 1px #e3c1a9;border-radius: 30px;/* Key css */text-align: center;line-height: 200px;font-size: 0px;}.content{font-size: 16px;/* Key css */display: inline-block;vertical-align: middle;line-height: initial;text-align: left;padding: 20px;border-radius: 10px;background-color: #e3c1a9;color: #ffffff;}
演示地址：
8、CSS表
CSS 的新 table 属性允许我们让普通元素看起来像表元素，通过这个特性，一个元素也可以居中。
.CSS
.container {width: 400px;height: 200px;border: solid 1px #e3c1a9;border-radius: 30px;/* Key css */display: table-cell;text-align: center;vertical-align: middle;}.content {/* Key css */display: inline-block;padding: 20px;border-radius: 10px;background-color: #e3c1a9;color: #ffffff;}
演示地址：
9、书写模式
过去，我曾经使用写入模式将内容的布局方向修改为垂直。但
令人惊奇的是，它也可以将元素居中，但这些方法有点难以理解并且有很多代码。
网页代码：
hello medium CSS代码：
.container {width: 400px;height: 200px;border: solid 1px #e3c1a9;border-radius: 30px;/* Key css */writing-mode: vertical-lr;text-align: center;}.content-wrap{/* Key css */writing-mode: horizontal-tb;display: inline-block;text-align: center;width: 100%;}.content {/* Key css */display: inline-block;margin: auto;text-align: left;padding: 20px;border-radius: 10px;background-color: #e3c1a9;color: #ffffff;}
演示地址：
10、表最后，
实际上，最后一种方法是最不推荐的方法css表格居中，但我只是作为学习的一个例子提到它。我不建议你在工作中使用它，因为它（在我看来有点糟糕）。
网页代码：
hello medium
CSS代码：
.container {width: 400px;height: 200px;border: solid 1px #e3c1a9;border-radius: 30px;/* Key css */text-align: center;}.content {/* Key css */display: inline-block;padding: 20px;border-radius: 10px;background-color: #e3c1a9;color: #ffffff;}
演示地址：
写在最后
以上就是我明天要和大家分享的关于CSS实现元素居中的10个技巧，希望大家能从小学拿到想要的知识，如果你觉得有用，请记得点赞我，关注我，分享给你的开发同学，其实可以帮助他。
最后感谢大家的阅读，节目愉快，今天见。
废话部分
前面提到的公司需求需要在旧项目中做一键换肤。然后我们开始这样做。
一、一键剥皮原理及几种方案 1、JS中的CSS算法
这个就不多说了，不管是 react 还是 vue，说白了就是直接把颜色写成 js 变量。但是，这是最兼容的解决方案
2.少用或SCSS
这也很简单，直接用少和scss管理CSS。然后使用这三者的操作功能进行换肤治疗
3.CSS变量
这块是新功能，IE不支持。但是有解决方案。
CSS-vars-ponyfill 可用于 IE11 兼容性。但是，限制更大。
我向您推荐一个演示地址：segmentfault.com/a/119000002....
4. 编写一套完整的 CSS 并替换它
我不认为会有这样的傻瓜
5.编写一组CSS，然后将值转移到后台，后台会生成一套完整的CSS来替换
这个由蚂蚁设计和elementUI提供的一键式皮肤剥离就是这样
二、项目背景
1、
公司是两年前的 Vue 项目，webpack 2 版本，然后组件库使用 Ant 设计的 Vue
2. 需要解决的问题
1.首先，如果项目上只有CSS还是很容易解决的，JS方案中的CSS还算不错，但是如果你用别人的组件库，是不是也要改变别人的组件库的风格
2. 第三方组件库的样式解决方案
3.如何制定规则，毕竟你是开发者，不是艺人。在哪里了解美化
三、解决第三方组件库
抱歉，这里没有elementUI皮肤解决方案。你只能靠自己
首先，我的建议来自简书博客：...
这个兄弟的完整代码可以实现 Ant Design 的组件库蒙皮形式，无论是 vue 还是 react
这是我的简化步骤
安装 npm install -D antd-theme-webpack-plugin
另外，我自己使用的时间与以下表格不同
核心在于 themeVariables 的配置，我把它注释掉了。因为这根本不影响使用。如果配置，会导致样式混淆
配置方法：
const AntDesignThemePlugin = require("antd-theme-webpack-plugin");
const path = require("path");
const options = {
antDir: path.join(__dirname, "./node_modules/ant-design-vue"), //antd包位置
stylesDir: path.join(__dirname, "./src/styles/theme"), //主题文件所在文件夹
varFile: path.join(__dirname, "./src/styles/theme/variables.less"), // 自定义默认的主题色
mainLessFile: path.join(__dirname, "./src/styles/theme/index.less"), // 项目中其他自定义的样式（如果不需要动态修改其他样式，该文件可以为空）
outputFilePath: path.join(__dirname, "./public/color.less"), //提取的less文件输出到什么地方
themeVariables: ["@primary-color"], //要改变的主题变量
indexFileName: "./public/index.html", // index.html所在位置
generateOnce: false // 是否只生成一次（if you don't want to generate color.less on each chnage in code to make build process fast in development mode, assign it true value. But if you have new changes in your styles, you need to re-run your build process npm start.）
};
module.exports = {
css: {
loaderOptions: {
less: {
modifyVars: {
// "primary-color": "#1DA57A",
// "link-color": "#1DA57A",
// "border-radius-base": "2px"
},
javascriptEnabled: true
}
}
},
configureWebpack: {
plugins: [new AntDesignThemePlugin(options)]
}
};
2. 蚂蚁组件的正常配置
但是，请不要加载css文件，如果要加载它，请以更少的形式加载它
3、无主和无变
虽然在这里的评论中已经说过了，但关键是上面的var.less
请务必添加此行！！
@import “~ant-design-vue/lib/style/themes/default.less”;
@primary色：#992777;
default.less 是声明蚂蚁的所有变量的地方，这没有吸引力，那么一切都是徒劳的
4. 索引.html文件的更改
<html lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="favicon.ico">
antd-vue-theme-demo
We're sorry but antd-vue-theme-demo doesn't work properly without JavaScript enabled. Please enable it to continue.
<link rel="stylesheet/less" type="text/css" href="./color.less" />
window.less = {
async: false,
env: 'production'//production development
};
<div id="app">
