整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
通常首选方法是使用flexbox居中内容。只需三行代码即可：display:flex，然后使用 align-items:center 和 justify-content:center 将子元素垂直和水平居中。
如下代码：
html：
<div class="flexbox-centering">
<div>Centered content.</div>
</div>css：
.flexbox-centering {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}使用grid(网格)与flexbox非常相似，也是一种常见的技术，尤其是布局中已经使用网格的情况下。与前一种flexbox技术的唯一区别是它显示为栅格。
如下代码：
html:
<div class="grid-centering">
<div class="child">Centered content.</div>
</div>css:
中，是我们编码过程中最常见的，那么，我们平时常见的居中方式，下面一一罗列出来，有错误的地方，望码友多多包涵并加以矫正。
水平居中
1、多块级元素，设置display:inline-block;使之在一行排列,在父级样式里，设置text-align：center;就可以实现水平居中的效果
body {
text-align: center;
}
div{
width: 100px;
height: 100px;
border: 1px solid;
display: inline-block;
}
2、内联元素，利用text-align：center;可以实现块级元素内部的内联元素的水平居中
div {
border: 1px solid red;
width: 100px;
height: 100px;
text-align: center;
}
<div>
<span>块级元素中的行内元素的水平居中</span>
</div>
3、块级元素，通过把固定宽高的块级元素的margin-left和margin-right设置为auto，方可实现
div{
width: 100px;
height: 100px;
border: 1px solid;
margin： 0 auto;
}
<div></div>
4、利用弹性盒子（display: flex;）
给父级定宽定高，然后设置display: flex;以及justify-content: center;方可达到水平居中效果
body {
width: 500px;
height: 500px;
display: flex;
justify-content: center;
border: 1px solid red;
}
div {
width: 100px;
height: 100px;
border: 1px solid;
}
<body>
<div></div>
</body>
垂直居中
1、内联元素（单行）
通过设置元素的height和line-height,方可达到居中效果
2、多行元素，利用表布局（table）
通过给想要居中的元素的父级设置display: talbe-cell;以及vertical-align：enter;方可居中
3、弹性盒子（flex）
给父级设置display: flex;变成弹性盒子。
分两种，
（1），主轴方向为水平，直接设置 align-items: center;
（2），主轴方向为垂直，设置flex-direction: column;改变主轴方向，然后设置justify-content: center;
弹性盒模型主轴不同，居中的方式也不同，灵活应用。
4、固定宽高的块级元素
利用父相子绝的定位原理，实现垂直居中
position: absolute;
left: 50%;
top: 50%;
margin-left: (自身高度的一半);
5,未知宽高的块级元素
利用transform: translateY(-50%);方可实现
position: absolute;
top: 50%;
transform: translateY(-50%);
水平垂直方向的居中
1、固定宽高
通过margin平移整体宽高的一半，实现水平垂直居中
{
position: absolute;
width: 100px;
height: 100px;
border: 1px solid;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -50px;
}
2、未知宽高
利用transform中的translate()属性实现
{
position: absolute;
border: 1px solid;
left: 50%;
top: 50%;
transform: translateY(-50%);
transform: translateX(-50%);
}
3、弹性盒子（flex）
通过display：flex，把父级变成弹性盒模型，利用align-items: center;justify-content: center;方可实现居中。
注意：弹性盒子容器中，多行项目的居中方式另加计算。
body {
border: 1px solid;
width: 300px;
height: 300px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
div {
border: 1px solid;
width: 100px;
height: 100px;
}
随着学习的不断深入，居中方式可以有很多种，我们要善于利用，更加明确什么情况下用怎样的居中方式。
内容首发于工粽号：程序员大澈，每日分享一段优质代码片段，欢迎关注和投稿！
大家好，我是大澈！
本文约 500+ 字，整篇阅读约需 1 分钟。
今天分享一段优质 CSS 代码片段，可以轻松实现元素垂直水平居中对齐。
老规矩，先阅读代码片段并思考，再看代码解析再思考，最后评论区留下你的见解！
div {
display: grid;
place-content: center;
}分享原因
这段代码展示了如何使用 CSS Grid 布局以及 place-content 属性来居中对齐元素。
CSS Grid 是一种强大的布局工具，提供了简单且灵活的方式来实现复杂的布局，而place-content 属性进一步简化了居中对齐的实现。
相较于 Flex 布局，Grid 布局仅仅只需一行代码即可搞定居中对齐！
代码解析
1. display: grid;
设置元素为网格容器。
网格容器可以通过定义网格行和列来布置其子元素。
2. place-content: center;
place-content 是 align-content 和 justify-content 的组合属性。
center 值表示内容在容器的中央对齐。
3. 兼容性
place-content: center; 的兼容性在现代浏览器中较好，某一些旧版浏览器的不兼容完全可以忽略了。
以下是一些常见浏览器的具体支持情况：
*请认真填写需求信息，我们会在24小时内与您取得联系。
