网页设计时，让div居中的问题挺麻烦的，新老手都可能遇到困难。不用慌，咱们来聊聊怎么用HTML和CSS解决这个难题！
1. 使用margin: auto让div水平居中
想把div放到中间，简单得很！直接给它添上 margin:auto 就能搞定。这个属性会帮你的div找好在其它元素里的中心点，像这样：
css
div {
margin: 0 auto;
}
搞定这个小技巧，你的DIV就会老老实实地待在容器里！这招超实用、简单易懂，大伙儿都会选择用它让DIV站得更稳妥。
center a div horizontally
.center-horizontally {
width: 50%;
margin: 0 auto;
background-color: #f0f0f0;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
}
this div is centered horizontally.
2. 使用flexbox让div居中
想看看图片和文字都好看的页面吗？试试Flexbox！这是个好帮手，能让你的内容看起来舒服，也省地方。css
.container {
center a div vertically
.container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.center-vertically {
width: 50%;
background-color: #f0f0f0;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
}
this div is centered vertically.
display: flex;
justify-content: center;
align-items: center;
用了Flexbox，DIV在容器里就乖乖地保持中间位置！这才是Flexbox惊人之处，除了简单，还有强大的布局能力。
center a div horizontally with flexbox
.flex-container {
display: flex;
justify-content: center;
}
.center-flex-horizontally {
width: 50%;
background-color: #f0f0f0;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
}
this div is centered horizontally with flexbox.
3. 使用css grid让div居中
告诉你，除了我们常用的Flexbox，CSS Grid也是个超好用的东西！它不仅能搞定各种繁琐的布局问题，而且操作起来比你想的还要简单多！
center a div vertically with flexbox
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.center-flex-vertically {
width: 50%;
background-color: #f0f0f0;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
}
this div is centered vertically with flexbox.
place-items: center;
Grid简直超棒的！不管是多难的排版都能做到，轻松就搞定了。
4. 使用transform让div居中
center a div with flexbox
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.center-flex {
width: 50%;
background-color: #f0f0f0;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
}
this div is centered both horizontally and vertically with flexbox.
页面有点低调？赶快试试变形功能！转啊、缩放啊、搬家啊、歪个身都可以哟~“`css
position: absolute;
top: 50%;
left: 50%;
center a div horizontally with grid
.grid-container {
display: grid;
place-items: center;
height: 100vh;
}
.center-grid-horizontally {
width: 50%;
background-color: #f0f0f0;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
}
this div is centered horizontally with grid.
缩放一下，把画面移动到中间来。
Transform神器！搞高大上操作就靠它，操作简单，你家宝贝都会用！
5. 使用text-align让div居中
想把图标放在框中间？那就试试 text-align ！别以为这只能调字距，其实在 CSS 里换个用法就能让每个格子里的东西都正中对齐~
center a div vertically with grid
.grid-container {
display: grid;
place-items: center;
height: 100vh;
}
.center-grid-vertically {
width: 50%;
background-color: #f0f0f0;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
}
this div is centered vertically with grid.
text-align: center;
这个text-align的功能真好用，让文本排版瞬间变得容易多了，既便利又实用！
6. 使用position和负边距让div居中
center a div with grid
.grid-container {
display: grid;
place-items: center;
height: 100vh;
}
.center-grid {
width: 50%;
background-color: #f0f0f0;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
}
this div is centered both horizontally and vertically with grid.
想要搞个炫酷的布局？position和负边距少不了学好了这俩招数，网页细节就能又帅气又好用哟。
margin-top: -50px;
margin-left: -50px;
center a div horizontally with transform
.center-transform-horizontally {
width: 50%;
position: absolute;
left: 50%;
transform: translatex(-50%);
background-color: #f0f0f0;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
}
this div is centered horizontally with transform.
使用定位和负边距，可以让元素操作更简单，就好像在玩游戏一样好玩且炫酷！
center a div vertically with transform
.center-transform-vertically {
width: 50%;
position: absolute;
top: 50%;
transform: translatey(-50%);
background-color: #f0f0f0;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
}
this div is centered vertically with transform.
7. 总结
别担心div要放哪~有好多法子可以搞定。像margin: auto、平板布局（flexbox）、方阵布局（css grid）、旋转（transform）、文字对齐（text-align）、定位（position）等等，甚至还能玩儿负边距！把这些招式都学会，你的网页设计绝对赞爆表！别磨蹭，赶快动手试一试，让你的网站美丽升级！
center a div with transform
.center-transform {
width: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #f0f0f0;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
}
this div is centered both horizontally and vertically with transform.
评论0