内联元素水平居中

在css中要使内联元素水平居中的方法是给它的父级元素添加

1
text-align: center;

样式即可。

内联元素垂直居中

在css中要使内联元素垂直居中的方法是给它的父级元素添加 line-height 样式，当 line-height 的值等于父级元素的高度时，元素就垂直居中了。

块级元素水平居中

要使块级元素水平居中，添加

1
margin: 0 auto;

样式即可做到，也可以写成

1
2
margin-left: auto;
margin-right: auto;

块级元素垂直居中

块级元素垂直居中，在css中没有现成的方法可以使用，但是万能的 position 样式可以办到，像这样：

1
2
3
position: absolute;
top: 50%;
transform: translateY(-50%);

即可实现块级元素垂直居中，但是需要注意的是，需要将这个块级元素的父级元素的 position 值设置为 relative，像这样：

1
position:relative;

块级元素垂直水平居中

如果需要将块级元素设置为水平垂直居中，则这样：

1
2
3
4
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);

即可，同样需要将这个块级元素的父级元素的 position 值设置为 relative，像这样：

1
position:relative;

有关 块级元素 和 内联元素 的定义，这理解不做详解了。