文章转自： https://ydmgirls.com/posts/e4lf3n
一、水平居中
1. 内联元素
如果想设置内联元素居中，仅需在内联元素的外层添加一个块级父元素，然后设置：
<div class="center-children">
<a>我是内联元素，我要水平居中哦！</a>
</div>
.center-children {
text-align: center;
}
2.块级元素
如果设置块级元素居中，要将块级元素的 margin-left 和 margin-right 属性设置成auto，并且块级元素一定要设置宽度，否则元素默认为100%宽度，不需要居中。
<div class="center-me">
我是块级元素，我要水平居中
</div>
.center-me {
width:200px;
margin: 0 auto;
}
3.两个以上块级元素
如果想把两个以上块级元素居中，我们要将子元素设置成内联元素
方法1
<div class="wrapper">
<div>
我想水平居中
</div>
<div>
我想水平居中
</div>
<div>
我想水平居中
</div>
</div>
.wrapper{
text-align:center;
}
.wrapper div{
display:inline-block;
background-color:#000;
color:#fff;
}
方法2 使用 flexbox
<div class="wrapper">
<div>
我想水平居中
</div>
<div>
我想水平居中
</div>
<div>
我想水平居中
</div>
</div>
.wrapper{
display:flex;
justify-content:center;
}
.wrapper div{
background-color:#000;
color:#fff;
margin-left:10px;
}
二、垂直居中
1.内联元素
方法1
<div class="wrapper">
我要垂直居中
</div>
.wrapper{
background-color:#000;
padding:40px 40px;
color:#fff;
}
方法2
<div class="wrapper">
我要垂直居中
</div>
.wrapper{
background-color:#000;
color:#fff;
height:100px;
line-height:100px;
}
方法3 设置padding可以可以实现多行内容居中，我们也可以通过设置display:table来垂直居中多行内容
<div class="wrapper">
<p>我要垂直居中啊a我要垂直居中啊a我要垂直居中啊a我要垂直居中啊a</p>
</div>
.wrapper{
display:table;
background-color:#000;
color:#fff;
width:200px;
height:200px;
}
.wrapper div{
display:table-cell;
vertical-align:middle;
}
方法4使用flexbox(父级元素要设置高度哦)
<div class="wrapper">
<p>我要垂直居中啊a我要垂直居中啊a我要垂直居中啊a我要垂直居中啊a</p>
</div>
.wrapper{
display:flex;
background-color:#000;
color:#fff;
width:200px;
height:200px;
flex-direction: column;
justify-content: center;
}
2.块级元素
方法1 元素宽度高度固定
<div class="wrapper">
<div>我要垂直居中啊a我要垂直居中啊a我要垂直居中啊a我要垂直居中啊a</div>
</div>
.wrapper{
position:relative;
background-color:#000;
color:#fff;
width:200px;
height:200px;
}
.wrapper div {
position: absolute;
background-color:red;
top: 50%;
left: 20px;
right: 20px;
height: 100px;
margin-top: -70px;
background: black;
color: white;
padding: 20px;
}
方法2 元素宽度高度不固定
<div class="wrapper">
<div>我要垂直居中啊a我要垂直居中啊a我要垂直居中啊a我要垂直居中啊a</div>
</div>
.wrapper{
position:relative;
background-color:#000;
color:#fff;
width:200px;
height:200px;
}
.wrapper div {
position: absolute;
top: 50%;
transform:translateY(-50%);
background-color:red;
}
方法3 使用 flexbox
<div class="wrapper">
<div>我要垂直居中啊a我要垂直居中啊a我要垂直居中啊a我要垂直居中啊a</div>
</div>
.wrapper{
display:flex;
background-color:#000;
color:#fff;
width:200px;
height:200px;
flex-direction: column;
justify-content: center;
}
三、水平和垂直居中
方法1 元素宽度高度固定
<div class="wrapper">
<div>我要垂直居中啊a我要垂直居中啊a我要垂直居中啊</div>
</div>
.wrapper{
position:relative;
background-color:#000;
color:#fff;
width:200px;
height:200px;
}
.wrapper div {
position: absolute;
width:100px;
height:100px;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
background-color:red;
}
方法2 元素宽度高度不固定
<div class="wrapper">
<div>我要垂直居中啊a我要垂直居中啊a我要垂直居中啊</div>
</div>
.wrapper{
position:relative;
background-color:#000;
color:#fff;
width:200px;
height:200px;
}
.wrapper div {
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background-color:red;
}
方法3 使用 flexbox
<div class="wrapper">
<div>我要垂直居中啊a我要垂直居中啊a我要垂直居中啊</div>
</div>
.wrapper{
display:flex;
background-color:#000;
color:#fff;
width:200px;
height:200px;
justify-content:center;
align-items: center;
}
.wrapper div {
width:100px;
height:100px;
background-color:red;
}
四、总结
以上就是 CSS 的各种居中方式啦，要灵活使用哦！
对学习抱有热情的开发小伙伴欢迎加入 qq群685421881，群主女孩，更欢迎热爱编程的妹子进入，让我们一起学习 并进步吧！
