CSS控制居中是前端开发中非常常用的布局技能，本文列出几种CSS控制元素居中的几种方法。
谈及HTML元素居中展示，涉及到水平居中和垂直居中，以及水平垂直居中。由于HTML文档流是水平方向的，所以水平方向上的布局控制比垂直方向要简单很多，居中也是如此。不过（水平）垂直居中还是有很多种写法，至少一只手是数不过来了，本文列出几种，并进行简单比较。
2024年07月25日
CSS控制居中是前端开发中非常常用的布局技能，本文列出几种CSS控制元素居中的几种方法。
谈及HTML元素居中展示，涉及到水平居中和垂直居中，以及水平垂直居中。由于HTML文档流是水平方向的，所以水平方向上的布局控制比垂直方向要简单很多，居中也是如此。不过（水平）垂直居中还是有很多种写法，至少一只手是数不过来了，本文列出几种，并进行简单比较。
2024年07月25日
div中的内容居中显示，包括水平和垂直2个方向。
<html>
<head>
<style type="text/css">
.box{
height:400px;
width:600px;
background-color: #f2dede;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="box">
<div style="background-color: #00a4e6">居中</div>
<div style="background-color: #00b33c">居中</div>
</div>
</body>
</html>2024年07月25日
学习css大家是不是对元素居中的知识点很是模糊？是不是苦于找不到一个总结的通俗易懂的说明？是不是自己懒得去总结？今天小编在前端的学习与实践中总结出的元素的五大居中方式，黏贴了代码并对代码做了解释，希望对迷茫的有所帮助！
下面的居中示例中，统一使用了同一个div作为父元素和p作为子元素
设置一个div,并且设置了div的宽高边框，div里面设置一个块元素p，设置了它的宽高和背景色
2024年07月25日
我之所以整理这类专题的手册，就是CSS相关的内容实在太碎和零散，同时又夹杂着相关的兼容问题。遇到问题时，我们有时候过度依赖搜索引擎进行求证解决，解决完也没做认真的归纳和总结。再次遇到此类问题时，我们有可能还不会，这就是我归纳这个手册的目的，我会把日常工作中经常会用到的高频CSS相关方法归纳到这个手册里（有的内容可能来源其它作者），欢迎你持续的订阅和关注。
2024年07月25日
水平居中设置
我们在实际工作中常会遇到需要设置水平居中的场景，比如为了美观，文章的标题一般都是水平居中显示的。
这里我们又得分两种情况：行内元素 还是 块状元素 ，块状元素里面又分为定宽块状元素，以及不定宽块状元素。今天我们先来了解一下
2024年07月25日
这几天有小伙伴在我的web前端交流群里说前几天面试一家公司，被问到垂直居中的方法，只答出了margin、table-cell、flex三种，然后就不知道了，然后问我除此之外还有哪些？，于是我整理了一下居中的方案做个记录，希望对大家也有帮助。
如果哪里写的不对，欢迎指正，非常感谢。
2024年07月25日
作者｜颜海镜
编辑｜覃云
出处丨前端之巅
本文已获作者授权，转载来源：
https://segmentfault.com/a/1190000016389031
划重点，这是一道面试必考题，很多面试官都喜欢问这个问题，我就被问过好几次了。