css怎么让元素居中显示？

下面我们来看一下css设置元素居中的方法：

一、水平居中

行内元素：给其父容器设置text-align:center

块级元素：首先设置宽度，然后margin：0 auto（必须设置宽度，因为块级元素默认占据一整行）

二、垂直居中

1、设置上下padding相等

2、绝对定位实现居中：

{
position:absolute;
left:50%; 框的左上角居中
top:50%;
margin-left:-xxpx;框宽度的一半
margin-top:-yypx;
width:2xxpx;
height:2yypx;
/transform:translate(-50%,-50%);/ 当框的宽高不定时可用，CSS3的属性*
}

3、vertical-align实现居中：给父容器增加一个伪元素

.box{
width:
height:
}
.box:before{
content:"";
display:inline-block;
height:100%;首先父容器得设置height、
vertical-align:middle;
}

4、table-cell实现居中：子元素的display设置为table-cell，vertical-align为middle，此时元素不为块级元素，若不设宽度为自动收缩。

5、父容器display:flex设置居中

{
width:
height:
display:flex;
align items:center;垂直居中
justify content:center;水平居中
}

以上就是css怎么让元素居中显示？的详细内容，更多请关注0133技术站其它相关文章！