水平居中
行内或类行内元素水平居中
在块级父容器中设置text-align:center
块级元素水平居中
块级元素设置margin-left
和margin-right
为auto
(前提是已经为元素设置了width
)
flex布局实现(多个水平排列元素)水平居中
display: flex;
justify-content: center;
flex布局实现(多个垂直排列元素)水平居中
display: flex;
flex-direction: column;
align-items: center;
绝对定位实现水平居中
width: 宽度值;
position: absolute;
left: 50%;
transform: translateX(-50%); 或者 margin-left: -宽度值的一半;
垂直居中
单行行内元素或单行类行内元素垂直居中
设置父容器的height
和line-height
为相同的值
height: 50px;
line-height: 50px;
使用table-cell
多行文本垂直居中
<div class="container">
<p>React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它</p>
</div>
.container {
width: 200px;
height: 200px;
border: 1px solid;
display: table-cell;
vertical-align: middle;
}
使用flex
实现垂直居中
display: flex;
flex-direction: column;
justify-content: center;
或者
display: flex;
align-items: center;
利用伪元素实现垂直居中
<div class="container">
<p>React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它</p>
</div>
注意:上面的例子中必须为p元素设置宽度,并且宽度必须小于父容器的宽度
.container {
width: 200px;
height: 200px;
border: 1px solid;
text-align: center;
}
.container p {
width: 190px;
display: inline-block;
vertical-align: middle;
}
.container:after {
content: "";
display: inline-block;
height: 100%;
width: 0;
vertical-align: middle;
}
绝对定位实现垂直居中
position: absolute;
top: 50%;
transform: translateY(-50%); 或者 margin-top: -自身高度的一半;
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。