# 内联元素水平居中
在css中要使内联元素水平居中的方法是给它的父级元素增加
text-align: center;
样式就可。
# 内联元素垂直居中
在css中要使内联元素垂直居中的方法是给它的父级元素增加 line-height
样式,当line-height
的值等于父级元素的高度时,元素就垂直居中了。
# 块级元素水平居中
要使块级元素水平居中,增加
margin: 0 auto;
样式就可做到,也能写成
margin-left: auto;margin-right: auto;
# 块级元素垂直居中
块级元素垂直居中,在css中没有现成的方法能用,但是万可以的position样式能办到,像这样:
position: absolute;top: 50%;transform: translateY(-50%);
就可实现块级元素垂直居中,但是需要注意的是,需要将这个块级元素的父级元素的 position
值设置为 relative
,像这样:
position:relative;
# 块级元素垂直水平居中
假如需要将块级元素设置为水平垂直居中,则这样:
position: absolute;top: 50%;left: 50%;transform: translateX(-50%) translateY(-50%);
就可,同样需要将这个块级元素的父级元素的 position
值设置为 relative
,像这样:
position:relative;