html设置自动居中显示,css怎么让元素居中显示？

很多时候，我们需要让元素居中显示：1. 一段文本的水平居中，2. 一张图片的水平居中，3. 一个块级元素的水平居中；4. 单行文本的竖直居中，5. 不确定高度的一段文本竖直居中，6. 确定高度的块级元素竖直居中等等。

下面我们来看一下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;水平居中

}